ratings評價列表頁實現

在ratings.vue組件里開發

首先先引入seller數據:

書寫模板結構：

由于評價頁又有之前寫過的star.vue組件，所以又要在ratings.vue組件引入：

import star from 'components/star/star';

并且注冊：

components: {

star

}

這部分的模板：

{{seller.score}}

綜合評分高于周邊商家{{seller.rankRate}}%

服務態度

{{seller.serviceScore}}

商品評分

{{seller.foodScore}}

送達時間

{{seller.deliveryTime}}分鐘

書寫樣式：

整個ratings區塊絕對定位的：

.ratings

position: absolute

top: 174px

bottom:0left:0width:100%overflow: hidden

這里的overview-left區塊是固定寬度，overview-right區塊是自適應寬度。所以還是用了flex布局。

而且這里overview-left還是響應式的：

.overview-left

flex:0 0137px

padding: 6px0width: 137px

border-right: 1px solid rgba(7, 17, 27, 0.1)

text-align: center

@media only screen and (max-width: 320px)

flex:0 0120px

width: 120px

在這個區塊下方還有個灰色間隔，因為在其他頁面也有，所以這里也可以用組件化開發一個split.vue：

然后在ratings.vue引入并注冊。

這樣就可以用在模板里面了：

這里再通過vue.resource去獲取之前處理過的data.json里面的ratings數據：

可以看到，數據已經出來了：

ratings.vue：

ratingsselect.vue：

接下來：

這三個按鈕都是可以點擊的，點擊哪一個就會顯示對應的評價，而且點擊后也會出現高亮。下面還有一個可選擇的文字。

當然，我們還是用組件化的思想來開發。

ratingselect.vue組件：

接著就可以在ratings.vue里引入和注冊了

接下添加內容：

再寫樣式

結果就是這樣：

接著繼續完成頁面的評價內容：

并且添加樣式

這樣頁面的基本結構就出來了：

接下來在ratings.vue組件中給頁面添加滾動：

加ref屬性：

這樣就可以滾動頁面了。

接下來要實現的功能就是根據我們點擊不同的按鈕，顯示按鈕所要求的評論內容。

這里還需要將ratings.vue組件的ratings數據傳給ratingselect.vue組件：

在ratingselect.vue組件計算屬性：得出滿意的和不滿意的評論數，用filter()來過濾：

然后把數據傳給DOM:

在ratingselect.vue組件添加按鈕的點擊狀態：ALL為2：const ALL = 2;

并且添加.active的樣式。

接下來要用到組件間的通信了，來傳遞子組件所點擊的是那個按鈕：

總結

以上是生活随笔為你收集整理的vue 仿二手交易app_项目vue2.0仿外卖APP（七）的全部內容，希望文章能夠幫你解決所遇到的問題。

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