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

微信小程序 五星评分

五星级评分效果:

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

效果如图:

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

(0)

相关推荐

  • 微信小程序五星评分效果实现代码

    微信小程序五星评分效果实现代码 很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,发出来分享一下: 我写的是5分满分制的,首先,准备3个图片, ,像这样的,分别代表分数为0,0.5,1 时的状态, 效果图:(以3.5为例) 然后上代码: js: function pingfenxing(pingfen){ var that=this, //这里是图片的路径,自己需要改 data={ ling:"img/pingfen0.png", zheng:"img/pi

  • 微信小程序 五星评分(包括半颗星评分)实例代码

    微信小程序 五星评分 一位同学说要写五星评分.要有半颗星的评分. 于是我做了个玩具.有空了做模块化,这代码看不下去了. 代码: 1.index.wxml <!--index.wxml--> <block wx:for="{{stars}}"> <image class="star-image" style="left: {{item*150}}rpx" src="{{key > item ?(key-

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

    微信小程序 五星评分 五星级评分效果: <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=&qu

  • 微信小程序的日期选择器的实例详解

    微信小程序的日期选择器的实例详解 前言: 关于微信小程序中的日期选择器大家用过都会发现有个很大的问题,就是在2月的时候会有31天,没有进行对闰年的判断等各种情况.看了官方文档提供的源码后进行了一些修改,测试修复了上面所说的bug! 下面源码: <!---js---> const date = new Date();//获取系统日期 const years = [] const months = [] const days = [] const bigMonth = [1,3,5,7,8,10,

  • 微信小程序“摇一摇”的实例代码

    微信小程序并没有提供摇一摇API接口,但是提供了一个重力感应的API 「wx.onAccelerometerChange(CALLBACK)」,我们可以用这个方法来模拟微信摇一摇功能,代码如下: Page({ onShow: function () { wx.onAccelerometerChange(function (e) { console.log(e.x) console.log(e.y) console.log(e.z) if (e.x > 1 && e.y > 1)

  • 微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解 最近在做微信小程序上传头像和上传照片功能就随手写一下代码: 上传头像html: <view class="edit-list"> <text class="list-name list-first">头像</text> <view class="edit-righr-bar"> <image class="head-portrait" src

  • 微信小程序 sha1 实现密码加密实例详解

    微信小程序 sha1 实现密码加密实例详解 在utils中的util.js 文件中增加 函数 实现 字符串转换为16进制加密后的字符串 function encodeUTF8(s) { var i, r = [], c, x; for (i = 0; i < s.length; i++) if ((c = s.charCodeAt(i)) < 0x80) r.push(c); else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x

  • 微信小程序 request接口的封装实例代码

    微信小程序 request接口的封装实例代码 小程序request接口的封装(本质上是对request回调函数再次回调) module.exports.getData = function (url) { var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var method = arguments.length > 2 && arguments[

  • 微信小程序 获取二维码实例详解

     微信小程序 获取二维码实例详解 理论: 接口A: 适用于需要的码数量较少的业务场景 接口地址:(永久有效,数量有限,进入path对应的页面) https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN path String 不能为空,最大长度 128 字节 width Int 430(默认) 二维码的宽度 auto_color .. line_color .. 接口B:适用于需要的码数量极多,或仅临时使用的业务场景(永

  • 微信小程序之GET请求的实例详解

    微信小程序之GET请求的实例详解 学习前端的人应该都会使用ajax的get请求数据,那么在微信小程序里怎样实现get请求呢?下面我就给大家演示一下简单的get请求. 先上代码: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', onLoad: function () { var that = this wx.request({ url: 'http://apis.baidu.com/heweat

随机推荐

其他