微信小程序-五星评分

来源：互联网发布：php class exists 编辑：程序博客网时间：2024/05/01 21:14

.wxml

<block wx:for="{{stars}}">    <image class="star-image" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">        <view class="tag">            <view class="item" data-key="{{item+0.5}}" bindtap="selectLeft"></view>            <view class="item" data-key="{{item+1}}" bindtap="selectRight"></view>        </view>     </image></block>

.wcss

.star-image {  width: 16px;  height: 16px;  margin-left: 30px;  margin-top: 30px;}.item {  float: left;  width: 8px;  height: 16px;}.tag {    display:inline-block;    position: absolute;    top: 30px;}

.js

var app = getApp()Page({    data: {        stars: [0, 1, 2, 3, 4],        normalSrc: '../../image/imgs/star.png',        selectedSrc: '../../image/imgs/status.png',        halfSrc: '../../image/icons/coin.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        })    }})

阅读全文

0 1