微信小程序五星级评分效果
<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-dark
是ZanUI-WeApp
的样式。
这里的my-ib
只是将设置display
为inline-block
。
Page({
data: {
star: 0,
starMap: [
'非常差',
'差',
'一般',
'好',
'非常好',
],
},
myStarChoose(e) {
let star = parseInt(e.target.dataset.star) || 0;
this.setData({
star: star,
});
}
});
效果如图:
王道中强流
不为繁华易匠心
被 1 篇内容引用
推荐阅读
Linux自动备份MySQL
首先找到你的MySQL配置文件my.cnf {代码...} 然后修改它, {代码...} 在[client]里增加三行: {代码...} 本来不需要这些操作,直接把用户名密码写到备份脚本里就可以,但是 MySQL 5.6 之后在命令行里写密码会出现...
王道中强流阅读 1.9k
简单实现微信小程序支付+php后端(回调、查询订单、订单信息入库)
微信小程序获取订单参数->向后端发起同意下单请求->获取订单参数->小程序调用Api进行发起支付->支付完成->发送回调->支付结果入库->查询订单支付状态。
TANKING赞 1阅读 1.9k
微信小程序开发--个性化头像生成(国庆渐变头像、圣诞帽头像)
今年国庆 渐变头像着实火了一把,看到微信里面的好友,很多都换上了新颜。 如上图所示,一个渐变的头像。作为码农,看到上面的效果,首先会想到这个是怎么实现的?我可不可以?于是就有了今天这篇文章,记录一下...
caiandroidDev阅读 2.1k
快来解锁小程序蓝牙开发技能
微信小程序中很早就支持了蓝牙能力,看过不少的文档,知道大概的流程和能实现的效果,但是由于一直没有像样的实战项目导致也没有正经的开发上线过,本次缘于接到了一个外包项目,那就顺道记录一下开发的过程及遇...
南城FE赞 2阅读 444
微信小程序-获取用户头像信息以及修改用户头像
这里主要用到button的open-type功能,官网已有说明:给button设置open-type="chooseAvatar",来使bindchooseavatar方法生效,在bindchooseavatar指定的函数中获取用户的头像信息
兔子先森阅读 705
微信小程序自定义tabbar图标切换点击两次才选中解决方法
微信小程序开发过程中使用了自定义tabBar,运行官网提供的demo是没有问题的,但是自己添加了新的tab-item后点击会出现错误,具体表现为:点击一次tab跳到指定的页面,但是tabBar的状态还停留在上一个,再次点击才...
来了老弟阅读 660
微信小程序的全局弹窗以及全局实例
微信小程序组件关系中,父组件使用子组件需要在父组件index.json中引入子组件,然后在父组件页面中使用,这种组件的对应状态是一对一的,一个组件对应一个页面。如果有一个全局弹窗(登录),那么每个页面引入一...
兔子先森阅读 593
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。