Vue商城项目03
發表評論
把文本框做雙向數據綁定
<textarea placeholder="請輸入內容" maxlength="120" v-model="msg"></textarea>
data中 msg: “” // 評論 輸入的內容
為發表按鈕綁定一個事件
<mt-button type="primary" size="large" @click="postComment">發表評論</mt-button>
校驗評論內容是否為空,如果為空,則Toast提示用戶 評論內容不能為空
main.js中Vue.http.options.root下面寫
- 如果調用 getComments 方法重新刷新評論列表的話,可能只能得到 最后一頁的評論,前幾頁的評論獲取不到
- 換一種思路: 當評論成功后,在客戶端,手動拼接出一個 最新的評論對象,然后 調用 數組的 unshift 方法, 把最新的評論,追加到 data 中 comments 的開頭;這樣,就能 完美實現刷新評論列表的需求;
改造圖片分析 按鈕為 路由的鏈接并顯示對應的組件頁面
<router-link to="/home/photolist"> <img src="../../images/menu2.png" alt=""> <div class="mui-media-body">圖片分享</div> </router-link>import PhotoInfo from './components/photos/PhotoInfo.vue'
{ path: '/home/photoinfo/:id', component: PhotoInfo }
繪制 圖片列表 組件頁面結構并美化樣式
制作頂部滑動條
- 先導入 mui 的JS文件:
- 在 組件的 mounted 事件鉤子中,注冊 mui 的滾動事件:
我們在初始化 滑動條 的時候,導入的 mui.js ,但是,控制臺報錯: Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode
解決方案:
cnpm install babel-plugin-transform-remove-strict-mode -D
在 .babelrc中 "plugins":["transform-remove-strict-mode"]
當 滑動條 調試OK后,發現, tabbar 無法正常工作了。App.vue 中的 router-link 身上的類名 mui-tab-item 存在兼容性問題,導致tab欄失效,可以把mui-tab-item改名為mui-tab-item1,并復制相關的類樣式,來解決這個問題;
滑動的時候報警告:Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
解決方法,可以加上* { touch-action: pan-y; } 這句樣式去掉。
獲取所有分類,并渲染 分類列表;
制作圖片列表區域
圖片列表需要使用懶加載技術,我們可以使用 Mint-UI 提供的現成的 組件 lazy-load
需要全局引入
import MintUI from ‘mint-ui’
Vue.use(MintUI)
import ‘mint-ui/lib/style.css’
根據lazy-load的使用文檔,嘗試使用
渲染圖片列表數據
<a :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']" v-for="item in cates" :key="item.id" @tap="getPhotoListByCateId(item.id)">
實現了 圖片列表的 懶加載改造和 樣式美化
z-index: 99 //z-index 屬性設置元素的堆疊順序。z-index的值越大,就越靠上
//實際的圖片
img {
width: 100%; //占滿全屏
vertical-align: middle;//垂直對齊方式。
}
實現了 點擊圖片 跳轉到 圖片詳情頁面
冒號 : 是綁定元素,后面是表達式
<router-link v-for="item in list" :key="item.id" :to="'/home/photoinfo/' + item.id" tag="li">
import PhotoInfo from './components/photos/PhotoInfo.vue'
{ path: '/home/photoinfo/:id', component: PhotoInfo },
實現 詳情頁面的布局和美化,同時獲取數據渲染頁面
引入子組件
// 1. 導入評論子組件
import comment from "../subcomponents/comment.vue";
// 2. 注冊 評論子組件
// 3.放置一個現成的 評論子組件
<cmt-box :id="id"></cmt-box>
//4. 所用的組件里傳值
props: ["id"]
實現 圖片詳情中 縮略圖的功能
vue-preview看此文檔使用 https://github.com/LS1231/vue-preview
一個Vue集成PhotoSwipe圖片預覽插件,使用 vue-preview 這個縮略圖插件
獲取到所有的圖片列表,然后使用 v-for 指令渲染數據
注意: img標簽上的class不能去掉
注意: 每個 圖片數據對象中,必須有 w 和 h 屬性
Vue.use(VuePreview)
總結
- 上一篇: 如果只定一个指标,市场运营的考核指标应该
- 下一篇: Vue自定义组件npm上传私服,且从私服