最新公告
  • 如遇下载失效问题,请联系在线客服,客服24小内为您解决!立即加入我们
  • 微信小程序实现星星评分示例

    5分满分制的,需要准备3张星星图片,一张空,一张一半,一张满

    js:

    function pingfenxing(pingfen){
         var that=this,  //这里是图片的路径,自己需要改
             data={
             ling:"img/pingfen0.png",
             zheng:"img/pingfen2.png",
             ban:"img/pingfen1.png"    },
             nums=[];//这里是返回图片排列的顺序的数组,这里要注意在页面使用的时候图片的路径,不过使用网络图片无所谓    if((pingfen/0.5)%2==0){//如果评分为整数,如4.0、5.0
              for(var i=0;i<5;i++){
                if(i<pingfen){
                  nums.push(data.zheng);
                }else{
                  nums.push(data.ling);
                }
              }
          }else{//评分不为整数,如3.5、2.5
              for(var i=0;i<5;i++){
                if(i<pingfen-0.5){
                  nums.push(data.zheng);//先把整数分离出来,如:3.5,这里就是先把3分离出来,把代表1的图片放进去
                }else if(i==(pingfen-0.5)){
                  nums.push(data.ban);//把小数的部分分离出来,如:3.5里的0.5,把代表0.5的图片放进去
                }else{
                  nums.push(data.ling);//然后剩下的就是没有满的用代表0的图片放进去,如:3.5,里面放进去了3个代表1的图片,然后放入了1个代表0.5的图片,最后还剩一个图片的位置,这时候就放代表0的图片
                }
              }
          }
           return num; } module.exports = {   pingfen:pingfenxing }
    

    WXML代码:

    <view class="pingfen">
         <block wx:for="{{item.pingfenpic}}" wx:key="{{item.id}}" wx:for-item="pingfen">
               <image class="img" src="{{pingfen}}"></image>
         </block>
         <text data-pingfen="{{item.pingfen}}" >{{item.pingfen}}</text>
    </view>
    

    使用这个功能的页面的JS代码:

    var pingxin=require("../../utils/pingxing.js");
    Page({  data:{    tuangou:tuangou}//我这里是在页面加载的时候先从后台获取数据,把数据的值赋值给tuangou,然后遍历将数据里面的参数拿出来,然后再把相应的评分中的图片排列顺序放到这条数据中的pingfenpic中保存,然后在页面中渲染即可
    onLoad:function(options){
        console.log('onLoad');
        var that=this;
        // 页面初始化 options为页面跳转所带来的参数
        wx.request({
          url: 'https://wxapp.com/tuangou',//这里是你请求数据的接口地址,自己填写
          data: {},
          method: 'GET',
          success: function(res){
            // success
            console.log(res.data.tuangou);
            let tuangou=res.data.tuangou;
            for(let i=0;i<tuangou.length;i++){
                tuangou[i].pingfenpic=pingxin.pingfen(parseFloat(tuangou[i].pingfen));//使用函数将评分变为图片排列的数组,这里要注意,如果评分传过来的是字符串  需要将它变为数字
            }
            that.setData({
              tuangou:tuangou
            });
           console.log(that.data.tuangou);
          },
          fail: function() {
            // fail
          },
          complete: function() {
            // complete
          }
        });  }
    });
    免责需知
    1、本站所有资源均来源于网络收集,一切版权©归原作者所有,请保留原版权信息。
    2、本站分享仅供参考学习和演示,禁止商用,如需商用,请从正规渠道选择购买正版!使用正版!支持正版!维护一个良好的知识产权环境。
    3、内容故是参考与学习,不确保能正常演示,也不包含其中的技术服务。
    4、排除在某个功能上存在有其它的BUG或源码残缺的可能,购买后一率不能退款。
    5、资源下载不含技术服务,需付费安装请联系客服100元/次。
    6、文件储存在网盘,如发现链接或者密码有误,请联系客服。
    7、如果付款后下载不了,请提交工单说明,客服会在24小时内解决,如果解决不了,会为您退款。
    8、侵权反馈邮箱:yutongyuncom@qq.com
    顺风猫 » 微信小程序实现星星评分示例

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    顺风猫
    一个高级程序员模板开发平台