退出

  • 文章收藏

  • 消息

  • 修改资料

  • 给wx:for循环里的元素添加一个动画简直比登天还难:既不能操作dom,又不能访问wx:for传进来的array以外的数据。不过好在在知乎上找到了解决办法,虽然没有实现直接添加animation对象,但可以为每个独立元素添加class。下面就把方法分享给大家。

    在微信小程序里面没有DOM对象, 不能操作DOM,所有的操作通过数据来实现。下面主要实现了给循环列表点击添加类的操作。

    一、单项

    目标需求:实现下图,给点击的view增加类,每次只能选择一个。

    主要思路:给点击的view增加类,依靠点击的index对state进行赋值。如果相同时,给该view增加类。

    实现代码

    .wxml文件

    <view>
       <view class='appointent-date'>
         <view  class="appointent-date-div {{state==index?'active-tag':''}}" bindtap="select_date"  wx:for="{{dates}}" data-key='{{index}}'>
           <view class="flex-item" >
             <rich-text class='data_name'>{{item.data_name}}</rich-text>
             <rich-text>{{item.name}}</rich-text>
           </view>
         </view>  
       </view>
    </view>
    

    .wxss文件

    .appointent-date{
       padding:10rpx 30rpx 40rpx 30rpx;
       background: #fff;
       box-sizing: border-box;
    }
    .appointent-date-div{
       display:inline-block;
       width:20%;
       text-align: center;
       margin-top: 30rpx;
    }
    .flex-item{
       display: inline-block;
       width:96rpx;
       height: 88rpx;
       font-size: 26rpx;
       border:2rpx solid #999;
       text-align: center;
       border-radius: 10rpx;
       color: #999;
       cursor: pointer;
       line-height: 30rpx;
    }
    .data_name{
       font-size: 36rpx;
       line-height: 52rpx;
       
    }
    .active-tag .flex-item{
       background: #c8321e;
       color:#fff;  
       border:1rpx solid #fff;
    }
    

    .js文件

    Page({
    /**
    * 页面的初始数据
    */  
      data: {
        dates: [
           { "data_name": "30", "name": "十三"},
           { "data_name": "1", "name": "十四"},
           { "data_name": "2", "name": "十五"},
           { "data_name": "3", "name": "十六"},
           { "data_name": "4", "name": "十七"},
           { "data_name": "5", "name": "十八"},
           { "data_name": "6", "name": "十九"},
           { "data_name": "7", "name": "二十"},
           { "data_name": "8", "name": "廿一"},
           { "data_name": "9", "name": "廿二"},
           { "data_name": "10", "name": "廿三"},
           { "data_name": "11", "name": "廿四"},
           { "data_name": "12", "name": "廿五"},
           { "data_name": "13", "name": "廿六"},
           { "data_name": "14", "name": "廿七"}
        ],
        state:''
      },
    //选择日期后加样式 27   
      select_date: function (e) {
        this.setData({
           state: e.currentTarget.dataset.key,
        });
      },
    })
    

    二、多项

    目标需求:实现下图,给点击的view增加类,再次点击时取消,可以多项选择。

    主要思路

    给dates数组增加一个属性state, 1表示状态选中,0表示未选中,每次点击时修改active的值。

    实现代码:

    .wxml文件

    <view class='appointent-date'>
         <view  class="appointent-date-div {{item.state==2?'active-tag':''}}" bindtap="select_date"  wx:for="{{dates}}" data-key='{{index}}'>
           <view class="flex-item" >
             <rich-text class='data_name'>{{item.data_name}}</rich-text>
             <rich-text>{{item.name}}</rich-text>
           </view>
         </view>  
    </view>
    

    .wxss文件

    .appointent-date{
       padding:10rpx 30rpx 40rpx 30rpx;
       background: #fff;
       box-sizing: border-box;
    }
    .appointent-date-div{
       display:inline-block;
       width:20%;
       text-align: center;
       margin-top: 30rpx;
    }
    .flex-item{
       display: inline-block;
       width:96rpx;
       height: 88rpx;
       font-size: 26rpx;
       border:2rpx solid #999;
       text-align: center;
       border-radius: 10rpx;
       color: #999;
       cursor: pointer;
       line-height: 30rpx;
    }
    .data_name{
       font-size: 36rpx;
       line-height: 52rpx;  
    }
    .active-tag .flex-item{
       background: #c8321e;
       color:#fff;  
       border:1rpx solid #fff;
    }
    

    .js文件

    Page({
    /**
     * 页面的初始数据
     */
      data: {
        dates: [
           { "data_name": "30", "name": "十三", "state": 0 },
           { "data_name": "1", "name": "十四", "state": 0 },
           { "data_name": "2", "name": "十五", "state": 0 },
           { "data_name": "3", "name": "十六", "state": 0 },
           { "data_name": "4", "name": "十七", "state": 0 },
           { "data_name": "5", "name": "十八", "state": 0 },
           { "data_name": "6", "name": "十九", "state": 0 },
           { "data_name": "7", "name": "二十", "state": 0 },
           { "data_name": "8", "name": "廿一", "state": 0 },
           { "data_name": "9", "name": "廿二", "state": 0 },
           { "data_name": "10", "name": "廿三", "state": 0 },
           { "data_name": "11", "name": "廿四", "state": 0 },
           { "data_name": "12", "name": "廿五", "state": 0 },
           { "data_name": "13", "name": "廿六", "state": 0 },
           { "data_name": "14", "name": "廿七", "state": 0 }
        ]
      },
    //选择日期后加样式 26  
      select_date: function (e) {
        var index = e.currentTarget.dataset.key;
        if (this.data.dates[index].state == 1) {
          this.data.dates[index].state = 0;
        } 
        else if (this.data.dates[index].state == 0) {
          this.data.dates[index].state = 1;
        }
        this.setData({
          dates: this.data.dates,
        });
      },
    })
    支付宝 微信 BTC
    支付宝扫一扫,向我打赏
    来源:小程序社区 - Rolan

    声明:本站原创文章采用 BY-NC-SA 创作共用协议,转载时请以链接形式标明本文地址;非原创(转载)文章版权归原作者所有。 ©查看版权声明

  • 白銀の魔法師
  • 所有的信徒都别无二致,所有的信仰都一文不值
  • 发表评论

    你目前的身份是游客,请输入昵称和邮箱! 输入资料 关闭