【小程序实现五星好评功能】

小程序实现五星好评功能

**
##功能实现如图

实现功能如下：

<image class="star-img" wx:for='{{list}}' wx:key='index' catchtap='setScore' data-index="{{index}}" data-item="{{item}}"  src="{{item.status ? starUrl[0].url : starUrl[1].url}}" />

data: {starUrl:[{url:'../../utils/imgs/order-icon/star_yellow.png'},{url:'../../utils/imgs/order-icon/star_gray.png'}],score: 1, //评价分数showPopup:false,   //弹窗list:[{id:0,status:true},{id:1,status:false},{id:2,status:false},{id:3,status:false},{id:4,status:false}]},setScore(e) {// console.log(e.currentTarget.dataset,'e.currentTarget.dataset')let index =  e.currentTarget.dataset.index;this.data.list[index].status = !this.data.list[index].status;this.setData({list:this.data.list})if(!this.data.list[index].status) {for (let i=index;i<this.data.list.length;i++) {this.data.list[i].status = false;this.setData({list:this.data.list})}} else {for(let i=0;i<index;i++) {this.data.list[i].status = true;this.setData({list:this.data.list})}}},

备注：点击选中的星星可以实现取消功能，点击未选中的星星可以实现选中功能，选中最后一个星星可以把前面的星星都选中，以此内推。。。

【小程序实现五星好评功能】相关推荐

微信小程序开发 - 五星好评
前言由于最近公司前端组开发紧缺人手,公司医美项目比较赶,所以主动请求协助医美小程序开发,现学现用,不过觉得小程序还蛮简单的,在做到一个评价医生页面时,用到点击五星好评,觉得有点用,就分享上来了~ 效 ...
php做五星评价系统,微信小程序之五星评价功能制作
这篇文章主要介绍了微信小程序五星评价功能的实现的相关资料,这里附有实例代码及实现效果图,需要的朋友可以参考下微信小程序五星评价功能话不多说,我们来看一下效果图: 要实现的效果:点击到第几颗星, ...
微信小程序开发——五星好评
准备工作首选需要有两个星星,一个满分星星,一个空心的星星. 代码实现 .wxml文件 <view class="right"><view bindtap=&q ...
现阶段的微信小程序能实现直播功能么？
对于没有技术背景的商家要使用微信小程序的直播,可以直接用来客推的免费开源版本,代码直接开源还接入微信小程序直播!符合开通条件的商家都可以快速制作直播小程序商城,享受小程序直播带来的早期红利微信小程序 ...
条令考试小程序辅助器_在线考试题库小程序开发有哪些功能？
因疫情的关系导致很多考试都没办法在线下进行,所以在线考试和考试题库小程序就运营而生了.那么考试题库小程序可以开发哪些功能呢? 1.同步练习:为了强化学生课堂所学内容,小程序会为用户提供相应的同步练习课 ...
游戏开发需要具备哪些技术_生鲜小程序需要具备哪些功能板块？生鲜小程序开发...
线上生鲜小程序开发让用户购买蔬菜水果更加便捷,不仅可以有利于发展生鲜行业之后的规模,而且也能够吸引更多的用户,低成本获客.那么,这样一款生鲜小程序需要具备哪些功能板块呢? 线上生鲜小程序需要具备什么? ...
java代码实现购物车小程序_使用Taro实现小程序商城的购物车功能模块的实例代码...
Taro 是一套遵循 React 语法规范的多端开发解决方案. 现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的 ...
nodejs android 推送,利用Nodejs怎么实现一个微信小程序消息推送功能
利用Nodejs怎么实现一个微信小程序消息推送功能发布时间:2021-01-20 13:55:29 来源:亿速云阅读:92 作者:Leah 今天就跟大家聊聊有关利用Nodejs怎么实现一个微信小程 ...
php 微信小程序循环多选,微信小程序实现多选功能
本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下代码: {{num + 1}}/{{quesyion.length}}{{question[num][0]}} A {{qu ...

【小程序实现五星好评功能】

小程序实现五星好评功能

实现功能如下：

【小程序实现五星好评功能】相关推荐

最新文章

热门文章