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

时间: 作者:力我

  

[微信小程序,五星评分,微信小程序,五星评分如何实现,微信小程序]微信小程序 五星评分(包括半颗星评分)实例代码

  

微信小程序 五星评分  

  

一位同学说要写五星评分.要有半颗星的评分.

  
  

  

于是我做了个玩具.有空了做模块化,这代码看不下去了.

  
  

  

  

  

代码:  
  

  

1.index.wxml  
  

  
  
          汇盛国际注册      
  
  

2.index.wxss  
  

  
  
  .star-image {  position: absolute;  top: 50rpx;  width: 150rpx;  height: 150rpx;  src: "../../images/normal.png";  }  .item {  position: absolute;  top: 50rpx;  width: 75rpx;  height: 150rpx;  }  
  
  

3.index.js  
  

  
  
  //index.js  //CSDN微信小程序开发专栏:  //获取应用实例  var app = getApp()  Page({  data: {  stars: [0, 1, 2, 3, 4],  normalSrc: '../../images/normal.png',  selectedSrc: '../../images/selected.png',  halfSrc: '../../images/half.png',  key: 0,//评分  },  onLoad: function () {  },  //点击右边,半颗星  selectLeft: function (e) {  var key = e.currentTarget.dataset.key  if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {  //只有一颗星的时候,再次点击,变为0颗  key = 0;  }  console.log("得" + key + "分")  this.setData({  key: key  })  },  //点击左边,整颗星  selectRight: function (e) {  var key = e.currentTarget.dataset.key  console.log("得" + key + "分")  this.setData({  key: key  })  }  })  
  
  

代码下载  
  

  

star.rar  

  

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  

(责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | 特效插件 | 常用代码 | 样式素材 | 脚本代码 | css特效

Copyright © 2017-2018 汇盛国际 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 汇盛国际平台