發表評論

把文本框做雙向數據綁定
<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下面寫

//使用ajax的post方式時，第三個參數一般都是一樣的，所以每次都重寫，還不如全局定義一下，就省略這個重復寫的過程。 // 全局設置 post 時候表單數據格式組織形式 application/x-www-form-urlencoded Vue.http.options.emulateJSON = true;

通過 vue-resource 發送一個請求，把評論內容提交給 服務器

當發表評論OK后，重新刷新列表，以查看最新的評論

• 如果調用 getComments 方法重新刷新評論列表的話，可能只能得到 最后一頁的評論，前幾頁的評論獲取不到
• 換一種思路： 當評論成功后，在客戶端，手動拼接出一個 最新的評論對象，然后 調用 數組的 unshift 方法， 把最新的評論，追加到 data 中 comments 的開頭；這樣，就能 完美實現刷新評論列表的需求；

postComment() {// 校驗是否為空內容 trim() 方法去除字符串的頭尾空格:if (this.msg.trim().length === 0) {return Toast("評論內容不能為空！");}// 發表評論// 參數1： 請求的URL地址// 參數2： 提交給服務器的數據對象 { content: this.msg }// 參數3： 定義提交時候，表單中數據的格式 { emulateJSON:true }this.$http.post("api/postcomment/" + this.$route.params.id, {content: this.msg.trim()}).then(function(result) {if (result.body.status === 0) {// 1. 拼接出一個評論對象var cmt = {user_name: "匿名用戶",add_time: Date.now(),content: this.msg.trim()};this.comments.unshift(cmt);this.msg = "";}});}}

改造圖片分析 按鈕為 路由的鏈接并顯示對應的組件頁面

<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 中的 tab-top-webview-main.html

由于滑動條在最頂部全屏展示，需要把 slider 區域的 mui-fullscreen類 去掉

滑動條無法正常觸發滑動，通過檢查官方文檔，發現這是JS組件，需要被初始化一下

• 先導入 mui 的JS文件:

import mui from '../../../lib/mui/js/mui.min.js'

• 在 組件的 mounted 事件鉤子中，注冊 mui 的滾動事件：

mounted() {// 當 組件中的DOM結構被渲染好并放到頁面中后，會執行這個 鉤子函數// 如果要操作元素了，最好在 mounted 里面，因為，這里時候的 DOM 元素 是最新的// 2. 初始化滑動控件mui(".mui-scroll-wrapper").scroll({deceleration: 0.0005 //flick 減速系數，系數越大，滾動速度越慢，滾動距離越小，默認值0.0006});}

我們在初始化 滑動條 的時候，導入的 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，并復制相關的類樣式，來解決這個問題；

.mui-bar-tab .mui-tab-item1.mui-active {color: #007aff;}.mui-bar-tab .mui-tab-item1 {display: table-cell;overflow: hidden;width: 1%;height: 50px;text-align: center;vertical-align: middle;white-space: nowrap;text-overflow: ellipsis;color: #929292;}.mui-bar-tab .mui-tab-item1 .mui-icon {top: 3px;width: 24px;height: 24px;padding-top: 0;padding-bottom: 0;}.mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {font-size: 11px;display: block;overflow: hidden;text-overflow: ellipsis;}

滑動的時候報警告：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; } 這句樣式去掉。

獲取所有分類，并渲染 分類列表；

<!-- :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']" 綁定樣式，并集類，第二個類是表達式來判斷 --> <!-- MUI同時也封裝好了，滑動欄點擊另外一個就會高亮顯示 --> <a :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']" v-for="item in cates" :key="item.id" @tap="getPhotoListByCateId(item.id)">{{ item.title }} </a>

制作圖片列表區域

圖片列表需要使用懶加載技術，我們可以使用 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;//垂直對齊方式。
}

實現了 點擊圖片 跳轉到 圖片詳情頁面

在改造 li 成 router-link 的時候，默認是a標簽，需要使用 tag 屬性指定要渲染為 哪種元素
冒號 : 是綁定元素，后面是表達式
<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. 注冊 評論子組件

components: {"cmt-box": comment}

// 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 屬性

npm i vue-preview -S

import VuePreview from ‘vue-preview’
Vue.use(VuePreview)

<div class="thumbs"><img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src"> //添加內容：Key需要綁定一下，其他代碼都是拷貝過來的</div>放在div為 thumbs中可以添加額外的樣式如：.thumbs{img{margin: 10px;box-shadow: 0 0 8px #999;}}getThumbs() {// 獲取縮略圖this.$http.get("api/getthumimages/" + this.id).then(result => {if (result.body.status === 0) {// 循環每個圖片數據，可以加上額外的屬性，補全圖片的寬和高result.body.message.forEach(item => {item.w = 600;item.h = 400;});// 把完整的數據保存到 list 中this.list = result.body.message;}});}

總結

以上是生活随笔為你收集整理的Vue商城项目03的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。