微信小程序实现给循环列表点击添加类（单项和多项）

最新推荐文章于 2022-11-27 19:42:03 发布
最新推荐文章于 2022-11-27 19:42:03 发布
阅读量117 收藏
点赞数
文章标签： php
原文链接：http://www.cnblogs.com/jvziking/p/8119443.html
版权

在微信小程序里面没有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-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:''
   },
   //选择日期后加样式
  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==1?'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 }
     ]
   },
   //选择日期后加样式
   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,
     });
   },
 })

 应用：

点击图片选中老师，每点击一次改变t_num的值

wxml:

  <view class='pteach_b'>
    <block wx:for="{{teach_object}}" wx:key="item.id">
      <view class='teacher_img' data-num="{{index}}" bindtap='count_num'>
        <image src='{{item.imgSrc}}'></image>
        <view class='teacher_name'>{{item.teachName}}</view>
        <view class="{{item.state==1?'teacher_bg_n':'teacher_bg_w'}}" >
          <view class='teacher_bg'>
            <view></view>
            <text>{{item.thankT}}</text>
          </view>
        </view>
      </view>
    </block>
  </view>
  <view class='pteach_foot'>
    <view class='foot_white'>已选择{{t_num}}位老师</view>
    <view class='foot_black'>投票</view>
  </view>

wxss:

.teacher_bg_w{
  display: none;
}
.teacher_bg_n{
  display: block;
}

 

js:

Page({
  data: {
    t_num:'0',
    teach_object:[
      {
        id:"1",
        imgSrc:"../../images/teacher1.png",
        teachName:"Jazz-胡闹闹",
        thankT:"感谢您的认可",
        state:0
      },
      {
        id: "2",
        imgSrc: "../../images/teacher2.png",
        teachName: "Popping-胡闹闹",
        thankT: "感谢您的认可",
        state: 0
      },
      {
        id: "3",
        imgSrc: "../../images/teacher3.png",
        teachName: "Jazz-胡闹闹",
        thankT: "感谢您的认可",
        state: 0
      },
      {
        id: "4",
        imgSrc: "../../images/teacher1.png",
        teachName: "Popping-胡闹闹",
        thankT: "感谢您的认可",
        state: 0
      },
      {
        id: "5",
        imgSrc: "../../images/teacher2.png",
        teachName: "Jazz-胡闹闹",
        thankT: "感谢您的认可",
        state: 0
      },
      {
        id: "6",
        imgSrc: "../../images/teacher3.png",
        teachName: "Jazz-胡闹闹",
        thankT: "感谢您的认可",
        state: 0
      }
    ]
  },
  count_num:function(e){
    var index=e.currentTarget.dataset.num;
    if (this.data.teach_object[index].state==1){
      this.data.teach_object[index].state=0;
    } else if (this.data.teach_object[index].state==0){
      this.data.teach_object[index].state=1;
    }
    
    var array=this.data.teach_object;
    var m = 0;
    for(var i=0;i<array.length;i++){
      var nn=this.data.teach_object[i].state;
      if(nn==1){
        m=m+1
      }
    }
    this.setData({
      teach_object: this.data.teach_object,
      t_num:m
    })
  }
})

 

 

 

 

转自： http://www.wxapp-union.com/portal.php?mod=view&aid=3358

 

转载于:https://www.cnblogs.com/jvziking/p/8119443.html

weixin_30457465
关注
微信小程序 实现点击收藏功能
qq_47811744的博客
04-07 2790
自己刚接触小程序，在网上找了很多的收藏的代码，但是发现都点击收藏后，退出去再回来已收藏又变成未收藏状态，然后自己就改改改 拼拼凑凑终于改了出来 就是代码有些复杂 感觉可以更简便 但是我还没有找到方法 在这里记录一下 有大佬也可以指点一下 .wxml代码 <viewclass="save"> <textclass="saveText">{{isClick?'已收藏':'收藏'}}</text> <imagestyle="h...
微信小程序复习总结
最新发布
2302_81909561的博客
04-27 1027
微信小程序简介微信小程序是一种由腾讯开发的应用程序软件，可在微信内直接使用，无需下载和安装。小程序的设计理念是"用完即走，无需安装"，旨在为用户提供轻量级的移动应用体验。通过微信平台提供的接口和工具，开发者可以创建不同类型的小程序，覆盖多个领域，如购物、社交、娱乐等。工具栏：在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。模拟区：在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。
微信小程序商品列表和购物车完整代码实例
12-13
微信小程序开发，代码完整可用，用于电商微信平台开发参考，有二个界面（商品展示页和购物车页面）商品展示页选择商品加入购物车，再进入购物车页面将看到加入购物车的商品，并有商品件数和金额，和淘宝的购物车类似，有很好的参考价值。
微信小程序view循环输出
giiiig的博客
01-21 1255
<view class="itemEdit" wx:for="{{itemList}}"> <view>{{item.value}}</view> <view>修改</view> <view>删除</view> </view> 以上html实际渲染结果为 附itemList数组，item表示数组之中的一个子值 itemList: [ { "id": 10, .
微信 小程序组件 循环
weixin_30387663的博客
10-09 511
//循环 <block wx:key="style" wx:for="{{item.style}}" wx:for-item="its" wx:for-index="itx"> <!-- <view > --> <view class='rob-merch-list flexba'> <view class='merch-list-...
微信小程序的for循环
weixin_30419799的博客
05-20 288
微信小程序的for循环的选项是item,下标是index。 wxml <view wx:for="{{arr}}"> <text>{{index}}--- {{item}}</text> </view> js data: { show:true, arr:["zs","ls","ss"] }...
微信小程序自定义单项选择器样式
10-16
在wxml文件中，单项选择器的结构通常包括一个包含多个选项的循环列表，每个选项可以被点击来选中或取消选中。通过给每一个选项绑定事件处理器（如上例中的`bindtap='radioChange'`），可以实现用户与界面的交互。 #...
微信小程序和uni-app面试高频知识点
qq_53694927的博客
11-27 891
微信小程序和uni-app面试高频知识点
小程序页面设计及获取用户公开信息
09-11
本资源带有单独的本地数据文件，可以实现文章列表读取数据，及获取微信用户公开信息。
【微信小程序】修改上个页面的列表数据
用心去做
09-06 2659
1. 场景 修改了某个数据，要返回上个界面的列表去刷新界面数据，该怎么做。 上两张图补充说明： 如上图所示，我们需要实现的是：在列表中，选择一个门店 > 进入详情 > 修改状态 > 返回上个页面 > 状态更新。 二. 实现方式 这里我想到两种方式： 返回列表界面后，重新请求列表数据。 实现方式：直接在列表界面的onShow()生命周期函数中重新发请求。 /** ...
微信小程序 项目实战（三）list 列表页 及 item 详情页
weixin_34218890的博客
01-12 7884
1.项目结构 2.list 列表页 （1）数据(逻辑) list.js // pages/list/list.js Page({ /** * 页面的初始数据 */ data: { title: '加载中...', // 状态 list: [], // 数据列表 type: '', // 数据类型 loading: true // 显示等待框...
微信小程序循环商品列表以及如何向其他页面传参数
猿飞梦的博客
02-25 4517
商品列表是好多个商品，jquery中我们可以用for循环，或者$.each()来循环商品列表，可是小程序中应该怎么写呢？ 其实很简单： 1、wx:for 是用来循环数组的,在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 &lt;view class='shop_Box'&gt; &lt;view class='shopBox' wx:for=...
微信小程序项目，实现图书列表渲染，以及图书详情跳转
weixin_33994429的博客
05-24 1599
今天实现了业务中最常见的列表到详情的功能，做一个总结归纳，方便自己以后温习 两个页面分别要实现如下设计稿的视图 在开始之前首先复习一下es6 promise的用法，之前一直听说过promise的用法，但一直没有实战过 首先写一个小DEMO，使用promise打印出微信小程序的当前系统信息 接着开始自己的项目，复制一个HTTP.js叫_HTTP,把原先的先保留着预防出...
关于微信小程序循环以及嵌套循环的总结
皮蛋小粥的博客
09-20 9419
关于微信小程序，最近被安排做微信小程序，首次接触，总体来说上手不是太困难。 对于小程序的循环问题颇有感触，因为自己绑定数据到界面无数次用到循环和嵌套循环。 对于我们在js中从接口中通过POST或GET请求获取数据存放到Page中定义的对象中：   //首页话题列表 wx.request({ url: 'https://*******************', ...
微信小程序选项卡、列表动态显示按钮
Fang格子的博客
12-12 5974
小程序选项卡功能实现 wxml页面： 先给选项卡赋值data-current=“待确认” 添加点击事件bindtap=“clickTab”， 在js里clickTab获取选项卡的值，e.target.dataset.current 通过that.setData赋值给currentTab，在wxml 选项卡class里进行判断{{currentTab==‘待确认’?‘active’:’’}}， 通...
微信小程序·实现列表页和详情页同步收藏
weixin_46591853的博客
03-25 4659
微信小程序实现列表页和详情页同步收藏 第一次写博客耶～不太会搞，记录一下这两天搞定的需求，原本想放弃了来着，结果做到了开心啊转圈圈吼吼吼 需求 这是毕业设计的项目，使用微信小程序，首页分类展示兼职列表，也有分页的，每个兼职在首页有收藏按钮，在详情页也可以收藏，希望做到这两个收藏按钮可以同步操作和表现收藏状态。 bug层出不穷233333 首页列表里点击按钮，虽然可以绑定这个兼职的id，可是不知道怎...
微信小程序 点击按钮切换页面
热门推荐
潮湿的桥
06-26 1万+
微信小程序中，按钮也是标签，它通过bindtap属性绑定点击事件： 然后在js里面注册这个回调函数： 回调函数里面通过 wx.navigateTo({ url: ‘/pages/index/talkPage’, })跳转到talkPage界面。 注意，html界面要在app.json里面注册： 不注册的话会报错：navigateTo:fail url “pages/index/talkPage” ...
微信小程序实现列表点击选中效果
"微信小程序实现列表点击添加类的技巧，主要涵盖了单项选择的实现方法。" 在微信小程序中，由于不支持直接操作DOM，开发者需要借助数据驱动的方式来更新界面。本示例介绍如何在循环列表中实现点击添加类的功能，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值