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


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 相关文章推荐
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
原生js实现弹窗消息动画
Nov 20 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的十大要点(上)
2009/02/04 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
elementui的默认样式修改方法
2018/02/23 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python比较两个图片相似度的方法
2015/03/13 Python
详解Python中break语句的用法
2015/05/14 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
python列表推导式操作解析
2019/11/26 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
会计岗位职责
2013/11/08 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
广告宣传策划方案
2014/05/21 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
银行招聘自荐信
2015/03/06 职场文书