微信小程序 五星评分的实现实例


Posted in Javascript onAugust 04, 2017

微信小程序 五星评分

五星级评分效果:

<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,
    });
  }
});

效果如图:

微信小程序 五星评分的实现实例

以上就是微信小程序 五星评分的实例,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 #Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 #Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 #Javascript
Angular实现响应式表单
Aug 04 #Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 #Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 #jQuery
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 #Javascript
You might like
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
PHP伪造referer实例代码
2008/09/20 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
php里array_work用法实例分析
2015/07/13 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
javascript包装对象实例分析
2015/03/27 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
Python 项目转化为so文件实例
2019/12/23 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
远程教育心得体会
2014/01/03 职场文书
个人简历中自我评价
2014/02/11 职场文书
学员自我鉴定
2014/03/19 职场文书
保险公司早会主持词
2014/03/22 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS