微信小程式星星評分元件
阿新 • • 發佈:2018-12-21
先看程式碼,用一個元件寫好星星元件,然後呼叫即可
rating.wxml
<view class='itembox'> <view wx:for="{{imgs}}" wx:key="{{item.id}}" bindtap='select' data-index="{{item.id}}"> <image class="star" src="{{item.id>starId?src2:src1}}"></image> </view> <view class='scorePin'>{{starId}}.00</view> </view>
rating.js
// component/rating/index.js Component({ /** * 元件的屬性列表 */ properties: { }, /** * 元件的初始資料 */ data: { imgs: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }], starId: 5, src1: '/images/star.png', src2: '/images/grayStar.png', }, /** * 元件的方法列表 */ methods: { select(e) { console.log(e) this.data.starId = e.currentTarget.dataset.index; this.setData({ starId: this.data.starId }) } } })
rating.wxss
.itembox {
display: flex;
align-items: center;
}
.scorePin{
font-size:26rpx;
font-weight: 600;
}
.star {
width: 50rpx;
height: 50rpx;
margin: 0 5rpx;
vertical-align: middle;
}
然後引用即可使用
這裡通過迴圈判斷顯示有色和無色的星星,這是關鍵點
<view wx:for="{{imgs}}" wx:key="{{item.id}}" bindtap='select' data-index="{{item.id}}"> <image class="star" src="{{item.id>starId?src2:src1}}"></image> </view>
還有一個問題是如何顯示4.2評分的星星,這個問題知道的道友可以提示下