小程序制作五星点评(默认五星)
来源:互联网 发布:普奥战争知乎 编辑:程序博客网 时间:2024/05/01 22:12
在小程序的开发过程中,我们会遇到一种情况,就是在制作五星点评的时候,默认五颗星星都是要亮的。这里我们就要分享一下自己做默认五星的心得。
在这里我们先看一下效果图:
我们在订单页面的时候,当点击“晒单”按钮的时候我们跳转到评价的页面。
(图一:订单列表)
(图二:评价)
在这里我们只看一下“描述相符的五星”
WXML代码:
<!--星星评价--> <view class="comment1-description" style="display:flex;flex-direction:row;"> <view class="comment1-description1">描述相符</view> <view class="star-pos" style="display:flex;flex-direction:row;"> <view class="starsM {{flag2>=1? '': 'hideStar'}}" bindtap="changeColor11"></view> <view class="starsM {{flag2>=2? '': 'hideStar'}}" bindtap="changeColor12"></view> <view class="starsM {{flag2>=3? '': 'hideStar'}}" bindtap="changeColor13"></view> <view class="starsM {{flag2>=4? '': 'hideStar'}}" bindtap="changeColor14"></view> <view class="starsM {{flag2>=5? '': 'hideStar'}}" bindtap="changeColor15"></view> </view> </view>
JS代码:
Page({ data:{ flag2:5 }, changeColor11:function(){ var that = this; that.setData( { flag2: 1 }); }, changeColor12:function(){ var that = this; that.setData( { flag2:2 }); }, changeColor13:function(){ var that = this; that.setData( { flag2: 3 }); }, changeColor14:function(){ var that = this; that.setData( { flag2:4 }); }, changeColor15:function(){ var that = this; that.setData( { flag2: 5 }); }})
WXSS代码:
.comment1-description{ margin-top: 35rpx;}.comment1-description1{ font-family: PingFangSC-Regular; font-size: 28rpx; color: #333333; margin-left: 30rpx;}.star-pos { position: absolute; right: 0px; margin-right: 40rpx;}.comment1-description .star-pos .hideStar{ z-index: 2; background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star(灰)@1.5x.png"); width: 83rpx; height: 43rpx; background-size: 43rpx 43rpx; background-position: center center; background-repeat: no-repeat;}.starsM{ z-index: 1; width: 83rpx; height: 43rpx; background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star@1.5x.png"); background-size: 43rpx 43rpx; background-position: center center; background-repeat: no-repeat;}
我们在这里的原理呢?接下来分析:
WXML代码里面,我们给每一颗星星通过bindtap绑定一个事件changeColor11,changeColor12…..等等五个事件。过个点击事件来改变flag2的默认值。
JS代码里面,我们默认flag2的值是5。然后里面可以调用WXML里面的事件。
WXSS中,我们通过starsM让所有星星都变亮,通过hideStar让所有的星星都变灰色。
0 0
- 小程序制作五星点评(默认五星)
- 小程序制作五星点评(默认五星)
- 小程序实现五星点评
- 小程序实现五星点评
- HLMT5Canvas标签五星制作
- winxp 提示盗版(小五星)解决办法
- 微信小程序-五星评分
- 微信小程序-五星评分功能
- 微信小程序开发-五星评价
- Android:RatingBar的默认五星显示问题
- 自定义Ratingbar(五星评价)
- jQ基础day05五星评分小案例
- 五星评论
- 五星评分
- 五星评分
- 五星评价
- 五星评价
- 五星评级
- 【javascript】【定时器】【setTimeout, setInterval】【优化】
- 【PAT】1020. Tree Traversals (25)
- 洛谷 1223_排队接水_贪心
- Java常见面试题及答案 21-30(集合类)
- CSDN如何转载博客
- 小程序制作五星点评(默认五星)
- string 的内存分配情况,以及intern()方法
- 将MySQL去重操作优化到极致之三弹连发(三):用rocksdb替代innodb
- 1003. 我要通过!(20)
- 加载倾斜摄影模型操作手册
- SpringMVC接收不到前端参数原因分析
- jqery 用 readonly 设置easyui-combobox为只读的方法
- c语言获取系统时间的几种方式
- iOS控件之bounds与frame