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


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 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
实例详解Node.js 函数
Jun 10 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
解决vant-UI库修改样式无效的问题
Nov 03 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 array_search() 函数使用
2010/04/13 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
试用php中oci8扩展
2015/06/18 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
vscode 远程调试python的方法
2017/12/01 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
python绘制规则网络图形实例
2019/12/09 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
深入浅析Python代码规范性检测
2020/07/31 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
毕业生就业推荐信范文
2013/12/01 职场文书
小学五年级学生评语
2014/04/22 职场文书
法律专业自荐信
2014/06/03 职场文书
培根随笔读书笔记
2015/07/01 职场文书
宾馆客房管理制度
2015/08/06 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书