zoukankan      html  css  js  c++  java
  • 小程序评价星级

    .wxml
    <view class="evaluateLv">
      <view class="leftCont">星级评价:</view>
      <view class="rightCont flex flex-ac">
        <block wx:for="{{lvList}}" wx:key="item">
          <view class="list-item">
            <image class="block" src="{{item}}" bindtap="evaluateLv" data-index="{{index}}"></image>
          </view>
        </block>
      </view>
    </view>
    .wxss
    .evaluateLv{display: flex;align-items: center;}
    .evaluateLv .leftCont { 25%;}
    .evaluateLv .rightCont { 75%;display: flex;align-items: center;}
    .evaluateLv .rightCont .list-item { 15%;}
    .evaluateLv image { 48rpx;height: 48rpx;}

    .js

    data: {
      lvList:[
        '/images/btn_star_default.png',
        '/images/btn_star_default.png',
        '/images/btn_star_default.png',
        '/images/btn_star_default.png',
        '/images/btn_star_default.png',
      ],//星星个数
      lvListActive1: '/images/btn_star_default.png',//选中的
      lvListActive2:'/images/btn_star_select.png',//未选中的
    },
     
    //星级评价
    evaluateLv(e){
      console.log(e);
      var that = this;
      var idx = e.currentTarget.dataset.index;
      var lvList = that.data.lvList;
      lvList.forEach((item,index) => {
        if (index <= idx){
          lvList[index] = that.data.lvListActive2;
        }
        else{
          lvList[index] = that.data.lvListActive1;
        }
      })
      that.setData({
        lvList: lvList,
      })
    },
  • 相关阅读:
    EF深入系列--细节
    EF深入系列--Code First
    WebApi深入学习--特性路由
    转:asp.net TreeView CheckChanged 事件浅谈
    Entity Framework 中的in操作实例
    解决IE8 内置JSON.stringify,中文变unicode的问题
    解决SQL Server的cannot resolve the collation conflict问题
    sqlserver 解析Json字符串
    EF性能调优
    IIS 发布mvc 403.14
  • 原文地址:https://www.cnblogs.com/pycmsj/p/11778682.html
Copyright © 2011-2022 走看看