微信小程序开发之五星评分（含半颗星评分）

发布：2018-01-31 12:09浏览：次来源：网络作者：cola

一位同学说要写五星评分.要有半颗星的评分.
于是我做了个玩具.有空了做模块化,这代码看不下去了.

代码:
1.index.wxml

<!--index.wxml-->

<block wx:for="{{stars}}">

  <image class="star-image" style="left: {{item*150}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">

    <view class="item" style="left:0rpx" data-key="{{item+0.5}}" bindtap="selectLeft"></view>

    <view class="item" style="left:75rpx" data-key="{{item+1}}" bindtap="selectRight"></view>

  </image>

</block>

2.index.wxss





.item {

  position: absolute;

  top: 50rpx;

  width: 75rpx;

  height: 150rpx;

}

3.index.js

//index.js



//获取应用实例

var app = getApp()

Page({

  data: {

    stars: [0, 1, 2, 3, 4],

    normalSrc: '../../images/normal.png',

    selectedSrc: '../../images/selected.png',

    halfSrc: '../../images/half.png',

    key: 0,//评分

  },

  onLoad: function () {

  },

  //点击右边,半颗星

  selectLeft: function (e) {

    var key = e.currentTarget.dataset.key

    if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {

      //只有一颗星的时候,再次点击,变为0颗

      key = 0;

    }

    console.log("得" + key + "分")

    this.setData({

      key: key

    })



  },

  //点击左边,整颗星

  selectRight: function (e) {

    var key = e.currentTarget.dataset.key

    console.log("得" + key + "分")

    this.setData({

      key: key

    })

  }

})

上一篇：微信小程序实例：创建下发模板消息实例

下一篇：关于微信小程序的的总结

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

微信小程序开发工具常用快捷键2018-06-09
微信小程序架构分析《一》调试技巧，模块构成，理念分析2018-02-07
微信小程序架构分析《二》：view 模块和 service 模块的构成2018-02-07
微信小程序架构分析《三》：实现过程以及实时更新2018-02-07
梁兴臣:微信小程序开发三宗罪和解决方案2018-02-07
微信小程序使用Promise实践2018-02-07
微信小程序开发系列分析《一》视图层2018-02-07
微信小程序开发系列分析《二》数据层2018-02-07
微信小程序官方文档个人分析心得2018-02-07
微信小程序的原型设计尝鲜2018-02-07