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


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的tab切换 js原理
Apr 01 Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 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/02 无线电
第十节--抽象方法和抽象类
2006/11/16 PHP
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
python制作花瓣网美女图片爬虫
2015/10/28 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python DataFrame 取差集实例
2019/01/30 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
专题组织生活会思想汇报
2014/10/01 职场文书
文言文辞职信
2015/02/28 职场文书
求职自荐信怎么写
2015/03/04 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python