快捷導航

微信小程序?qū)崿F(xiàn)星級評價

更新時間：2019年11月20日 16:03:27 作者：csq087

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)星級評價，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序星級評價的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

wxml

<view class='assess-star'>
  <view class='star-wrap'>
   <view class='star-item' wx:for="{{stars}}" wx:key="" style='background:url("{{item.flag==1?item.lightImg:item.blackImg}}") no-repeat top;background-size:100%;' data-index="{{index}}" bindtap='starClick'></view>
  </view>
  <view class='star-desc'>{{starDesc}}</view>
</view>

wxss

.assess-star {
 margin-top: 20rpx;
}
 
.star-wrap {
 width: 50vw;
 margin: 10rpx auto 10rpx auto;
}
 
.star-item {
 display: inline-block;
 height: 60rpx;
 width: 60rpx;
 margin-right: 10rpx;
}
 
.star-desc {
 font-size: 30rpx;
 font-family: PingFangSC-Regular;
 font-weight: 400;
 color: rgba(243, 162, 0, 1);
 text-align: center;
}

js

Page({
 
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  starDesc: '非常滿意，無可挑剔',
  stars: [{
   lightImg: '../../../../images/xing.png',
   blackImg: '../../../../images/xing1.png',
   flag: 1,
   message: '非常不滿意，各方面都很差'
  }, {
   lightImg: '../../../../images/xing.png',
   blackImg: '../../../../images/xing1.png',
   flag: 1,
   message: '不滿意，比較差'
  }, {
   lightImg: '../../../../images/xing.png',
   blackImg: '../../../../images/xing1.png',
   flag: 1,
   message: '一般，還要改善'
  }, {
   lightImg: '../../../../images/xing.png',
   blackImg: '../../../../images/xing1.png',
   flag: 1,
   message: '比較滿意，仍要改善'
  }, {
   lightImg: '../../../../images/xing.png',
   blackImg: '../../../../images/xing1.png',
   flag: 1,
   message: '非常完美，無可挑剔'
  }]
 },
 // 選擇評價星星
 starClick: function(e) {
  var that = this;
  for (var i = 0; i < that.data.stars.length; i++) {
   var allItem = 'stars[' + i + '].flag';
   that.setData({
    [allItem]: 2
   })
  }
  var index = e.currentTarget.dataset.index;
  for (var i = 0; i <= index; i++) {
   var item = 'stars[' + i + '].flag';
   that.setData({
    [item]: 1
   })
  }
  this.setData({
   starDesc: this.data.stars[index].message
  })
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function(options) {
 
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  */
 onReady: function() {
 
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面顯示
  */
 onShow: function() {
 
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面隱藏
  */
 onHide: function() {
 
 },
 
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面卸載
  */
 onUnload: function() {
 
 },
 
 /**
  * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
  */
 onPullDownRefresh: function() {
 
 },
 
 /**
  * 頁面上拉觸底事件的處理函數(shù)
  */
 onReachBottom: function() {
 
 },
 
 /**
  * 用戶點擊右上角分享
  */
 onShareAppMessage: function() {
 
 }
})

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: