微信小程序评星星功能

HTML：  

<view class='xin_box'>

      <view class='xin_box'>

        <view></view>

        <block wx:for="{{one_1}}" wx:key=''>

          <image '/img/xin2.png'></image>

        </block>

        <block wx:for="{{two_1}}" wx:key=''>

          <image src='/img/xin1.png'></image>

        </block>

      </view>

      <view></view>

      <view style='margin-top:60px;'></view>

      <block wx:for="{{one_2}}" wx:key="index">

        <image catchtap='in_xin' id='{{index+1}}' data-in='use_sc2' src='/img/xin2.png'></image>

      </block>

      <block wx:for="{{two_2}}" wx:key="index">

        <image catchtap='in_xin' id='{{index+1}}' data-in='use_sc' src='/img/xin1.png'></image>

      </block>

      <view class='num'>{{one_2}}星</view>

    </view>

 

js：

data: {

    num: 4, //后端给的分数,显示相应的星星

    one_1: '',

    two_1: '',

    one_2: 0,

    two_2: 5,

    vdieo_list: [{

      vdieourl: '',

      vid: '0',

      wapimg: ''

    }, ]

  },

onLoad: function(options) {

    showView: (options.showView == "true" ? true : false)

    //情况一:展示后台给的评分

    this.setData({

      one_1: this.data.num,

      two_1: 5 - this.data.num

    });

  }，

//情况二:用户给评分

  in_xin: function(e) {

    var in_xin = e.currentTarget.dataset.in;

    var one_2;

    if (in_xin === 'use_sc2') {

      one_2 = Number(e.currentTarget.id);

    } else {

      one_2 = Number(e.currentTarget.id) + this.data.one_2;

    }

    this.setData({

      one_2: one_2,

      two_2: 5 - one_2

    })

  },