微信小程序开发教程之满意度

话不多说,我们来看一下效果图: 要实现的效果:点击到第几颗星,就要显示到第几颗星, 接下来直接查看源码: <view class="l-evalbox row">     <text class="l-evaltxt">满...

话不多说,我们来看一下效果图:attachments-2017-03-xfxdPQEQ58b8c7b44e4e

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

接下来直接查看源码:

<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

        });

      

  },

这样效果显示如下:attachments-2017-03-yBablrNP58b8c7e2057e

原文链接:http://www.cnblogs.com/0liaoyi/p/6477394.html

0 条评论

请先 登录 后评论
不写代码的码农
花花花小伙 

5 篇文章

作家榜 更多

  1. 李得胜 22 文章
  2. 新媒广告价 17 文章
  3. admin 15 文章
  4. 墨尔本情  12 文章
  5. 步非+烟花  12 文章
  6. 唱歌跑调的女生 12 文章
  7. 有头猪在看我 11 文章
  8. matou7790 11 文章