微信小程序开发之五星评分

一位同学说要写五星评分.要有半颗星的评分.
于是我做了个玩具.有空了做模块化,这代码看不下去了.
gif:

代码:
1.index.wxml

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

2.index.wxss

.star-image {position: absolute;top: 50rpx;width: 150rpx;height: 150rpx;src: "../../images/normal.png";
}.item {position: absolute;top: 50rpx;width: 75rpx;height: 150rpx;
}

3.index.js

//index.js
//CSDN微信小程序开发专栏:http://blog.csdn.net/column/details/13721.html
//获取应用实例
var app = getApp()
Page({data: {stars: [0, 1, 2, 3, 4],normalSrc: '../../images/normal.png',selectedSrc: '../../images/selected.png',halfSrc: '../../images/half.png',key: 0,//评分},onLoad: function () {},//点击右边,半颗星selectLeft: function (e) {var key = e.currentTarget.dataset.keyif (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.keyconsole.log("得" + key + "分")this.setData({key: key})}
})

demo下载地址
CSDN微信小程序开发专栏,欢迎关注!
我的博客,欢迎交流批评!

微信小程序开发之五星评分相关推荐

微信小程序开发之——星星评分等级显示
一概述本文要实现如下所示的效果:输入要显示的评价等级,界面上就有几颗星亮起,最多5颗二思路界面布局中:五张图片横向排列,使用wx:if和wx:else判断显示哪一个在逻辑文件中,将要显示的 ...
微信小程序开发(十一)五星好评
在之前的原生iOS开发中写了一个<[iOS]星星评分控件HGDQStars>,这个在原生开发里面可以给出0~5之间的任意一个分数,使用起来也很方便. 最近在做小程序开发,也需要一个五星好评 ...
微信小程序开发之五星好评
首选需要有两个星星代码实现 html代码 css代码 .right .star { float: left; width: 54rpx; height: 54rpx; text-align: cen ...
01.微信小程序开发之环境搭建
在开发之前你要有微信开发者工具,下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 这里我要假设大家有已经拿到了 ...
《微信小程序》微信小程序开发实例
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
2020年高校微信小程序开发大赛全国三等奖——《重邮指路牌》
文章目录前言证书比赛流程回顾开发小程序阶段提交项目策划书阶段线上答辩阶段前言今年疫情期间由于闲来无事就自学微信小程序并报名5月份的高校微信小程序开发大赛,一方面是锻炼开发能力,一方面是 ...
微信小程序开发的完整流程介绍，新手必读
自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...
微信小程序开发（2）_data属性
假设我们的环境都做好了,现在我们开始开发自己的小程序首先我们开发出自己的 Hello World 我们要做的事情是当前点击hello World的时候HelloWorld的颜色发生变化: 这个是我们 ...
微信小程序开发之选项卡
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...

微信小程序开发之五星评分

微信小程序开发之五星评分相关推荐

最新文章

热门文章