欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)的五星評價功能示例

 更新時間:2019年04月25日 08:39:35   作者:guanguan0_0  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的五星評價功能,結(jié)合實例形式分析了微信小程序五星評價相關(guān)的界面布局、事件響應(yīng)等操作技巧,需要的朋友可以參考下

本文實例講述了微信小程序?qū)崿F(xiàn)的五星評價功能。分享給大家供大家參考,具體如下:

實現(xiàn)五星評價功能,效果圖如下:

.wxml文件:

<view class="star-title">1、品質(zhì)效果</view>
<view class="star-pos">
  <image class='stars' bindtap="changeColor" data-index='0' data-no="{{item}}" wx:for="{{stardata}}"
        src="{{flag[0]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />
  <view style='margin-left: 30rpx;'>{{startext[0]}}</view>
</view>
<view class="star-title">2、服務(wù)質(zhì)量</view>
 <view class="star-pos">
  <image class='stars' bindtap="changeColor" data-index='1' data-no="{{item}}" wx:for="{{stardata}}"
          src="{{flag[1]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />
  <view style='margin-left: 30rpx;'>{{startext[1]}}</view>
</view>
<view class="star-title">3、綜合管理</view>
<view class="star-pos">
  <image class='stars' bindtap="changeColor" data-index='2' data-no="{{item}}" wx:for="{{stardata}}"
        src="{{flag[2]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />
  <view style='margin-left: 30rpx;'>{{startext[2]}}</view>
</view>

.js 文件:

page: ({
  data: {
      flag:[0, 0, 0],
      startext: ['', '', ''],
      stardata: [1, 2, 3, 4, 5],
    },
    // 五星評價事件
    changeColor: function (e) {
      var index = e.currentTarget.dataset.index;
      var num = e.currentTarget.dataset.no;
      var a = 'flag[' + index + ']';
      var b = 'startext[' + index + ']';
      var that = this;
      if(num == 1) {
        that.setData({
          [a]: 1,
          [b]: '非常不滿意'
        });
      } else if (num == 2){
        that.setData({
          [a]: 2,
          [b]: '不滿意'
        });
      } else if (num == 3) {
        that.setData({
          [a]: 3,
          [b]: '一般'
        });
      } else if (num == 4) {
        that.setData({
          [a]: 4,
          [b]: '滿意'
        });
      } else if (num == 5) {
        that.setData({
          [a]: 5,
          [b]: '非常滿意'
        });
      }
  },
})

.wxss文件:

.star-pos {
  margin: 10rpx;
  display: flex;
  flex-direction: row;
}
.stars{
  width: 40rpx;
  height: 40rpx;
  margin-left: 30rpx;
}

希望本文所述對大家微信小程序開發(fā)有所幫助。

相關(guān)文章

  • php對mongodb的擴展(小試牛刀)

    php對mongodb的擴展(小試牛刀)

    本文主要講解php連接、操作mongodb,有需求的朋友可以參考下
    2012-11-11
  • jsPDF導(dǎo)出pdf示例

    jsPDF導(dǎo)出pdf示例

    這篇文章主要介紹了jsPDF如何導(dǎo)出pdf,不過其貌似不支持中文,需要的朋友可以參考下
    2014-05-05
  • document.getElementById方法在Firefox與IE中的區(qū)別

    document.getElementById方法在Firefox與IE中的區(qū)別

    相信很多朋友在寫JavaScript的時候,對瀏覽器的兼容問題會感到很頭疼。這不,煩什么,什么就來了,特記錄下來,與大家分享。
    2010-05-05
  • JS 常用校驗函數(shù)

    JS 常用校驗函數(shù)

    比較常用到的一些字符驗證函數(shù),里面有正則等好東西,推薦大家保存即可直接調(diào)用。
    2009-03-03
  • 純javascript實現(xiàn)分頁(兩種方法)

    純javascript實現(xiàn)分頁(兩種方法)

    有的時候頁面需要很多不同的表組成的數(shù)據(jù),該怎么分頁呢?使用數(shù)據(jù)庫分頁很簡單,那么如何使用js實現(xiàn)分頁呢?接下來,小編幫大家解決這個問題,需要的朋友一起來學(xué)習(xí)吧
    2015-08-08
  • js+csss實現(xiàn)的一個帶復(fù)選框的下拉框

    js+csss實現(xiàn)的一個帶復(fù)選框的下拉框

    用js+csss實現(xiàn)的一個帶復(fù)選框的下拉框,用到了很基礎(chǔ)的技術(shù),但是比較實用,喜歡的朋友可以參考下
    2014-09-09
  • ES6字符串的擴展實例

    ES6字符串的擴展實例

    這篇文章主要介紹了ES6字符串的擴展實例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • 20行JS代碼實現(xiàn)粘貼板復(fù)制功能

    20行JS代碼實現(xiàn)粘貼板復(fù)制功能

    本文給大家分析20行JS代碼實現(xiàn)粘貼板功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-02-02
  • 教你如何通過JavaScript讀取元素的樣式

    教你如何通過JavaScript讀取元素的樣式

    這篇文章主要給大家介紹了關(guān)于如何通過JavaScript讀取元素的樣式,文中通過實例代碼以及圖文介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2022-01-01
  • 在js中判斷checkboxlist(.net控件客戶端id)是否有選中

    在js中判斷checkboxlist(.net控件客戶端id)是否有選中

    添加或修改內(nèi)容時,需要對關(guān)鍵數(shù)據(jù)進行判空處理,checkboxlist是否有選擇項如何使用js判斷實現(xiàn),接下來為大家詳細介紹下實現(xiàn)方法,感興趣的朋友可以參考下哈
    2013-04-04

最新評論