|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 我們經常會有對服務或者物品的評價,通用的方式就是五星,通過觸摸快速達到評級的效果。先看一下實現的效果圖:
如上圖所示,這里我們要添加三個五星點評。第一個[描述符合],第二個[發貨速度],第三個[服務態度]。 <!--星星評價-->
<view class="comment1-description" style="display:flex;flex-direction:row;">
<view class="comment1-description1">描述相符</view>
<view class="star-pos" style="display:flex;flex-direction:row;">
<view class="stars {{flag0>=1? 'on': ''}}" bindtap="changeColor1"></view>
<view class="stars {{flag0>=2? 'on': ''}}" bindtap="changeColor2"></view>
<view class="stars {{flag0>=3? 'on': ''}}" bindtap="changeColor3"></view>
<view class="stars {{flag0>=4? 'on': ''}}" bindtap="changeColor4"></view>
<view class="stars {{flag0>=5? 'on': ''}}" bindtap="changeColor5"></view>
</view>
</view>JS代碼 Page({
data:{
flag:0
},
changeColor1:function(){
var that = this;
that.setData( {
flag: 1
});
},
changeColor2:function(){
var that = this;
that.setData( {
flag:2
});
},
changeColor3:function(){
var that = this;
that.setData( {
flag: 3
});
},
changeColor4:function(){
var that = this;
that.setData( {
flag:4這里通過一個變量flag的值的變化,來控制和確定[描述相符]這個評分的具體值。 /*星星的樣式*/
.stars{
background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star(灰)@1.5x.png");
width: 43rpx;
height: 43rpx;
background-size: 43rpx 43rpx;
margin-left: 40rpx;
}
.on{
background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star@1.5x.png");
width: 43rpx;
height: 43rpx;
background-size: 43rpx 43rpx;
/*margin-left: 10px;*/
}更多微信小程序中的五星點評相關文章請關注PHP中文網! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!