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


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 函数参数限制说明
Nov 19 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
chrome调试javascript详解
Oct 21 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
Javascript动画效果(2)
Oct 11 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
说说node中的可读流和可写流的区别
Jun 01 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
十天学会php之第四天
2006/10/09 PHP
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
详解用python写一个抽奖程序
2019/05/10 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
教师个人事迹材料
2014/12/17 职场文书
刑事起诉书范文
2015/05/19 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python