微信小程序开发 - 五星好评

前言

由于最近公司前端组开发紧缺人手，公司医美项目比较赶，所以主动请求协助医美小程序开发，现学现用，不过觉得小程序还蛮简单的，在做到一个评价医生页面时，用到点击五星好评，觉得有点用，就分享上来了~

效果图：文件材料：

这个效果代码不多，更多的是一种思路，废话不多说，上代码~

.wxml

<view bindtap="starTap" data-index="{{index}}" wx:for="{{userStars}}" wx:key="index"><image src="{{item}}" class="stars_img"></image>
</view>

.wxss

.stars_img{height: 36rpx;width: 36rpx;padding-left: 20rpx;float: left}

.js

Page({//页面的初始数据data: {imgurl: app.globalData.imgurl,//引用外部imgage地址userStars: [app.globalData.imgurl +'/images/stars_1.png',app.globalData.imgurl +'/images/stars_1.png',app.globalData.imgurl +'/images/stars_1.png',app.globalData.imgurl +'/images/stars_1.png',app.globalData.imgurl +'/images/stars_1.png',],},// 星星点击事件starTap: function (e) {var index = e.currentTarget.dataset.index; // 获取当前点击的是第几颗星星var tempUserStars = this.data.userStars;   // 暂存星星数组var len = tempUserStars.length;            // 获取星星数组的长度for (var i = 0; i < len; i++) {if (i <= index) {                        // 小于等于index的是满心tempUserStars[i] = app.globalData.imgurl +'/images/stars_2.png'} else { // 其他是空心tempUserStars[i] = app.globalData.imgurl +'/images/stars_1.png'}}// 重新赋值显示this.setData({userStars: tempUserStars})},})

首先做一个包含5个星星的数组 , 默认是有1颗星星的，再就是处理点击事件，在处理点击事件前我们要先理清思路。比如我们点击第3颗星星时，需要显示的是3星满星，2颗空心。那么这个数组userStars就好处理了，数组的前3个元素是满心，后两个是空心。

做个记录，兴许以后用的着~

微信小程序开发 - 五星好评相关推荐

微信小程序开发——五星好评
准备工作首选需要有两个星星,一个满分星星,一个空心的星星. 代码实现 .wxml文件 <view class="right"><view bindtap=&q ...
微信小程序开发-五星评价
今天在做自己的小程序的时候做到一个对店铺的评价,文字什么的都很easy,遇到一个有趣的五星评价.先想到一个直接选择12345星的五星评价,以后有3星半的评价的效果再继续补充. 开始撸代码..... 首 ...
微信小程序开发之五星评分
一位同学说要写五星评分.要有半颗星的评分. 于是我做了个玩具.有空了做模块化,这代码看不下去了. gif: 代码: 1.index.wxml <block wx:for="{{star ...
【微信小程序宝典】从零开始做微信小程序开发
开发前必读简要基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接微信小程序个人注册简单步骤打开mp.weixin.qq.com,点击右上角立即注册,进入小程序注册| 链接微 ...
01.微信小程序开发之环境搭建
在开发之前你要有微信开发者工具,下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 这里我要假设大家有已经拿到了 ...
《微信小程序》微信小程序开发实例
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
微信小程序开发的完整流程介绍，新手必读
自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...
微信小程序开发（2）_data属性
假设我们的环境都做好了,现在我们开始开发自己的小程序首先我们开发出自己的 Hello World 我们要做的事情是当前点击hello World的时候HelloWorld的颜色发生变化: 这个是我们 ...
微信小程序开发之选项卡
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...

微信小程序开发 - 五星好评

前言

微信小程序开发 - 五星好评相关推荐

最新文章

热门文章