微信小程序五星级评分效果

yellowleopard 发布于6月前 阅读50次
0 条评论

<view>
    <view class="zan-font-16 my-ib" bindtap="myStarChoose">
        <block wx:for="{{starMap}}">
            <text wx:if="{{star>=index+1}}" style="padding-right: .5em" class="zan-c-red" data-star="{{index+1}}">★</text>
            <text wx:if="{{star<index+1}}" style="padding-right: .5em" class="zan-c-gray-dark" data-star="{{index+1}}">☆</text>
        </block>
    </view>
    <!--★-->
    <text class="zan-c-gray-dark">{{starMap[star-1]}}</text>
</view>

这里的zan-font-16,zan-c-red,zan-c-gray-darkZanUI-WeApp的样式。
这里的my-ib只是将设置displayinline-block

Page({
    data: {
        star: 0,
        starMap: [
            '非常差',
            '差',
            '一般',
            '好',
            '非常好',
        ],
    },
    myStarChoose(e) {
        let star = parseInt(e.target.dataset.star) || 0;
        this.setData({
            star: star,
        });
    }
});

效果如图:

查看原文: 微信小程序五星级评分效果

  • tinylion
  • blackgoose
  • silvercat
  • lazybutterfly
  • tinyswan
  • bluebutterfly
  • purplerabbit
  • crazyswan
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。