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

更新時(shí)間：2019年04月25日 08:39:35 作者：guanguan0_0

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的五星評(píng)價(jià)功能,結(jié)合實(shí)例形式分析了微信小程序五星評(píng)價(jià)相關(guān)的界面布局、事件響應(yīng)等操作技巧,需要的朋友可以參考下

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

實(shí)現(xiàn)五星評(píng)價(jià)功能，效果圖如下：

.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],
    },
    // 五星評(píng)價(jià)事件
    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;
}

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

您可能感興趣的文章:

相關(guān)文章

微信小程序自定義掃碼功能界面的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序自定義掃碼功能界面的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-07-07
js實(shí)現(xiàn)的切換面板實(shí)例代碼
切換面板具備功能：鼠標(biāo)劃過不同的題目會(huì)有不同的圖片和解說，可以連接到不同的網(wǎng)站，實(shí)例代碼如下，感興趣的朋友可以參考下哈
2013-06-06
使用js畫圖之正弦曲線
這篇文章主要介紹了使用js繪制幾何圖形的方法的系列文章，本文主要講訴正弦曲線的繪制方法,需要的朋友可以參考下
2015-01-01
js實(shí)現(xiàn)顯示手機(jī)號(hào)碼效果
本文主要介紹了js實(shí)現(xiàn)顯示手機(jī)號(hào)碼效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-03-03
uni-app瀑布流效果實(shí)現(xiàn)方法
Uni-app是一個(gè)基于Vue.js開發(fā)跨平臺(tái)應(yīng)用的框架,它可以將代碼編譯成多個(gè)平臺(tái)下的原生應(yīng)用,這篇文章主要給大家介紹了關(guān)于uni-app瀑布流效果的相關(guān)資料,需要的朋友可以參考下
2023-12-12
js模擬實(shí)現(xiàn)京東詳情頁圖片放大效果
這篇文章主要為大家詳細(xì)介紹了js模擬實(shí)現(xiàn)京東詳情頁圖片放大效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
JavaScript中保留兩位小數(shù)的方法總結(jié)
這篇文章主要把相關(guān)保留兩位小數(shù)的方法總結(jié)了一下，不同的場(chǎng)景用不同的方法，即用即取，文中的示例代碼講解詳細(xì)，?感興趣的小伙伴可以了解一下
2023-06-06
js實(shí)現(xiàn)iGoogleDivDrag模塊拖動(dòng)層拖動(dòng)特效的方法
這篇文章主要介紹了js實(shí)現(xiàn)iGoogleDivDrag模塊拖動(dòng)層拖動(dòng)特效的方法,實(shí)例分析了javascript操作拖動(dòng)層的技巧,需要的朋友可以參考下
2015-03-03
Node.js：Windows7下搭建的Node.js服務(wù)(來玩玩服務(wù)器端的javascript吧,這可不是前端js插件
什么是Node.js?還服務(wù)器端javascript?對(duì)于這個(gè)概念我在這篇文章不做解釋，可以自己去搜索了解下，服務(wù)器端js不是新技術(shù)，只是最近的node.js的火爆讓他爆發(fā)了，我會(huì)在以后的文章里解釋什么是node.js。
2011-06-06
從setTimeout看js函數(shù)執(zhí)行過程
這篇文章主要介紹了從setTimeout看js函數(shù)執(zhí)行過程,需要的朋友可以參考下
2017-12-12