zoukankan      html  css  js  c++  java
  • 微信小程序之 满意度

    话不多说,我们来看一下效果图:

    要实现的效果:点击到第几颗星,就要显示到第几颗星,

      接下来直接查看源码:

    <view class="l-evalbox row">
        <text class="l-evaltxt">满意度:</text>
        <view class="l-evalist flex-1" bindtap="chooseicon">
            <icon class="{{tabArr.curHdIndex >'0'? 'cur icon' : 'icon'}}" data-id="1"></icon>
            <icon class="{{tabArr.curHdIndex >'1'? 'cur icon' : 'icon'}}" data-id="2"></icon>
            <icon class="{{tabArr.curHdIndex >'2'? 'cur icon' : 'icon'}}" data-id="3"></icon>
            <icon class="{{tabArr.curHdIndex >'3'? 'cur icon' : 'icon'}}" data-id="4"></icon>
            <icon class="{{tabArr.curHdIndex >'4'? 'cur icon' : 'icon'}}" data-id="5"></icon>
        </view>
    </view>
    

      css如下:

    .l-evalbox{
    	height: 100rpx;
    	padding: 0 3%;
    	margin-top: 10rpx;
    	background: #FFF;
    	line-height: 100rpx;
    }
    .l-evaltxt{
    	 120rpx;
    	display: block;
    	font-size: 26rpx;
    	color: #666666;
    }
    .l-evalist .icon{
    	background-position:  -77rpx -246rpx;
    	 40rpx;
    	height: 43rpx;
    	margin-right: 30rpx;
    }
    .l-evalist .cur{
    	background-position:  -128rpx -246rpx;
    }
    .l-evalist .icon:last-child{
    	margin: 0;
    }
    

      js代码如下:

    chooseicon:function(e){
         
        var strnumber=e.target.dataset.id;  
          var _obj={}; 
            _obj.curHdIndex=strnumber;  
            this.setData({  
              tabArr: _obj
            });
         
      },
    

      这样效果显示如下:

  • 相关阅读:
    课程作业(一)
    PTA 5-3 解题报告
    作业(四)
    C#循环语句整理
    C#数组和集合整理
    作业(三)
    1.0总结
    如何在C++中产生随机数
    CLSRSC-400: A system reboot is required to continue installing.
    Upgrade a Non-CDB To a PDB on CDB
  • 原文地址:https://www.cnblogs.com/0liaoyi/p/6477394.html
Copyright © 2011-2022 走看看