微信小程序五星评价功能实现

实现五星评价功能，效果图如下：

.wxml文件：

<view class="star-title">1、品质效果</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、服务质量</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],},// 五星评价事件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;}

微信小程序五星评价功能实现相关推荐

黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
微信小程序语音识别java_微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
微信小程序拼团功能页面展示
微信小程序拼团功能页面展示一.拼团功能拼团就是让消费者在优惠价格的吸引下,自发邀请好友组团,以优惠的价格购买商品的促销活动二.拼团功能的作用 1.与纯粹的购物相比,这种营销方式迎合了大多数用户的 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
IVX低代码平台开发——微信小程序实现抽奖功能
写在前面通过利用可视化编程实现微信小程序的抽奖功能,带大家初步了解 iVX 的强大之处. 文章目录写在前面 iVX开发抽奖功能实现 iVX开发基本介绍 iVX是一个 "零代码&quo ...
微信小程序-001-抽签功能-006-我的抽签-主界面
微信小程序-001-抽签功能-006-我的抽签-主界面目录一.wxml 二.js pages.chouqian.setqian.setqian 一.wxml <view wx:for=&qu ...
微信小程序与卡券功能小结
微信小程序与卡券功能小结前段时间公司有一个微信小程序的项目,其中有与卡券打通的功能,但是微信的官方文档实在是一言难尽...找了很多资料才解决这个问题,其中涉及到卡券的领取,卡券的核销等,在这里做一个 ...

微信小程序五星评价功能实现

微信小程序五星评价功能实现相关推荐

最新文章

热门文章