E企盈营销工具技术服务商 热线:4006-838-530

微信小程序米林县E企盈小程序笔记显示五星好评(注意是显示不是点击评价!)

网上看了好多都是点击事件实现五星评价,想做一个只显示五星的微信小程序模板,结果网上都不全,所以还是自己写一个免得忘记,学艺不精,如果你有更好的方法请一定要留下评论或者私信给我,十分感谢!1、先上一个效果图,就是出镜率超高的豆瓣电影小程序(微信上面叫 “豆瓣评分”)。2、因为是五星显示,所以第一步要先除以2,如果你想显示十星的话就不用除以2了,在设置空星的时候把length改为10就行。以下是js源码:onLoad: function(options) {    var that = this;    wx.showLoading({      title: '拼命加载中....'    })    w开通棉双纱平纹小程序电话:4006-838-530x.request({      url: API_URL,      data: {},      success: function(res) {        wx.hideLoading()        var dataList = res.data.data;        for (var i=0; idataList.length;i++) {          dataList[i].stars = []  //添加需要的star数组          var data = dataList[i].score / 2  //除以2,以便换5星          var score = Math.floor(data * 2) / 2;  //四舍五入          var hasDEcimal = score % 2 !== 0; //判断奇偶          var integer = Math.floor(score);  //取整          for (var n=0; ninteger; n++) { //整数添加满星            dataList[i].stars.push(1);         开通十月妈咪小程序电话:4006-838-530 }          if (hasDEcimal) {   //奇数添加半星            dataList[i].stars.push(2)          }          while (dataList[i].stars.length 5) {  //其余为空星            dataList[i].stars.push(0)          }        }        that.setData({          movieList: dat开通硝化细菌小程序电话:4006-838-530aList        })      }    })  }

我是直接写在onload方法里面的,如果有更好的方法请一定要告知,谢谢!ps : Math.floor(x)返回小于或等于数字的最大整数x。3、因为用到的地方比较多,所以我直接写成一个star模板,以下是模板的wxml,wxss代码。template name="starsTemplate"  view class='stars-container'    view class='stars'      block wx:for="{{stars}}" wx:key='position'        image wx:if='{{item == 1}}' src='../../images/on.png' class='star-img'/image        image wx:elif='{{item == 2}}' src='../../images/half.png' class='star-img'/image        image wx:else src='../../images/off.png' class='star-img'/image      /block    /view    text class='star-text'{{score}}/text  /view/template

.stars-container {  display: flex;  flex-direction: row;  margin-top: 5px;  position: relative;}.stars {  display: flex;  flex-direction: row;    margin-top: 3px;    margin-right: 15px;}.star-img {  height: 10px;  width: 10px;  margin-right: 3px;}.star-text {  color: #4a6164;  font-size: 12px;}

4、最后直接在需要用到的页面引用即可,如下  import src="../../public/star.wxml"/  view     template is="starsTemplate" data="{{stars: item.stars, score: item.score}}"/  /view

5、最重要的是不要忘记在同一wxss文件中引入css样式!!!@import "../../public/star.wxss";

搞定! 如果有需要全部源码(全部 = 这个页面,因为其他还没做完。。)可以私信我

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序米林县E企盈小程序笔记显示五星好评(注意是显示不是点击评价!)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

模王系统开发

联系我们升级日志

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏