微信小程序之满意度

最新推荐文章于 2024-07-26 21:12:43 发布

东边的小山

最新推荐文章于 2024-07-26 21:12:43 发布

阅读量2.8k

点赞数

分类专栏：微信公众平台微信小程序

微信小程序同时被 2 个专栏收录

180 篇文章 15 订阅

订阅专栏

微信公众平台

142 篇文章 5 订阅

订阅专栏

话不多说，我们来看一下效果图：

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

接下来直接查看源码：

 
    
         <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{ 
        
         width: 120rpx; 
        
         display: block; 
        
         font-size: 26rpx; 
        
         color: #666666; 
        
         } 
        
         .l-evalist .icon{ 
        
         background-position:  -77rpx -246rpx; 
        
         width: 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 
        
         }); 
        
         },