iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现循环嵌套数据选择
  • 464
分享到

微信小程序实现循环嵌套数据选择

2024-04-02 19:04:59 464人浏览 八月长安
摘要

本文实例为大家分享了微信小程序实现循环嵌套数据选择的具体代码,供大家参考,具体内容如下 一、效果展示 二、代码实现 在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的

本文实例为大家分享了微信小程序实现循环嵌套数据选择的具体代码,供大家参考,具体内容如下

一、效果展示

二、代码实现

在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的情况,需要利用wx:for嵌套实现数据的展示。这时,外层循环正常循环,内层循环需要利用wx:for-item将item重新命名。

<scroll-view scroll-y class="scrollTime">
    <view 
        class="dateItem" 
        wx:for="{{serviceTime}}" 
        wx:key="date" 
        wx:for-index="id" 
        data-index="{{index}}">
        <view class="date">
            <text class="dateTxt">{{item.month}}月{{item.day}}日</text>
        </view>
        <view class="time">
            <block wx:for="{{item.timeFrame}}" wx:key="items" wx:for-item="items">
                <view 
                    wx:if="{{items.number !== 0}}"
                    class="{{items.isSelect ? 'timeItem-active' : 'timeItem'}}"
                    data-select-index="{{id}}" 
                    data-attr-index="{{index}}"
                    data-content="{{serviceTime}}"
                    bindtap="bindleTimeItemTap" >
                    <text class="timeTxt">{{items.time}}</text>
                    <view >
                        <text class="numberTxt">剩余:</text>
                        <text class="number">{{items.number}}</text>
                    </view>
                    <view class="selectItem" wx:if="{{items.isSelect}}">
                        <image class="image-select" src="../../../icons/label_select.png"/>
                    </view>
                </view>
                <view wx:else class="timeItem-None">
                    <text class="timeTxt-full">{{items.time}}</text>
                    <text class="numberTxt-full">已满</text>
                </view>
            </block>
        </view>
    </view>
    <view class="scrollViewFooter">
        <text class="footerTxt">没有更多了</text>
    </view>
</scroll-view>

选择某一个数据时,需要在数据对象中添加一个是否选中的字段,将未被选择的数据置false,选择的数据置true,实现选中后样式的更改。

// 假数据结构
let serviceTime = [
    {
        day : 1,
        month : 8, 
        timeFrame : [
            {
                time : '8:00-10:00',
                number : 2,
            },
            {
                time : '10:00-12:00',
                number : 0,
            },
            {
                time : '14:00-16:00',
                number : 2,
            },
        ]
    },
];

Page({
    
    data: {
        serviceTime : serviceTime,
        selectDay : null,
        selectMonth : null,
        selectTime : null,
    },
    
    
    bindleTimeItemTap(e) {
        let that = this;
        let selectIndex = e.currentTarget.dataset.selectIndex;
        let attrIndex = e.currentTarget.dataset.attrIndex;
        let content = e.currentTarget.dataset.content;
        var cnt = content.length;
        // 将其他按钮选择状态置false
        for (var i = 0; i < cnt ; i++){
            var count = content[i].timeFrame.length;
            for (var j = 0; j < count; j++) {
                content[i].timeFrame[j].isSelect = false;
            }
        }
        // 将选择的按钮选择状态置true
        content[selectIndex].timeFrame[attrIndex].isSelect = true;
        that.setData({
            serviceTime: content,
            selectDay: content[selectIndex].day,
            selectMonth: content[selectIndex].month,
            selectTime: content[selectIndex].timeFrame[attrIndex].time,
        })
    },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: 微信小程序实现循环嵌套数据选择

本文链接: https://www.lsjlt.com/news/149428.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序实现循环嵌套数据选择
    本文实例为大家分享了微信小程序实现循环嵌套数据选择的具体代码,供大家参考,具体内容如下 一、效果展示 二、代码实现 在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的...
    99+
    2024-04-02
  • 微信小程序如何实现循环及嵌套循环
    这篇文章主要为大家展示了“微信小程序如何实现循环及嵌套循环”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序如何实现循环及嵌套循环”这篇文章吧。微信小程序...
    99+
    2024-04-02
  • 微信小程序中页面FOR循环和嵌套循环的示例分析
    小编给大家分享一下微信小程序中页面FOR循环和嵌套循环的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!微信小程序中页面F...
    99+
    2024-04-02
  • 微信小程序实现双层嵌套菜单栏
    最近在做的项目有这样一个需求,也不太好描述,就是有两个顶部菜单栏,每个二级菜单栏的item都有自己页面,每个页面都可以通过左右滑动来切换,第一个想到的实现方法就是双层swiper嵌套...
    99+
    2024-04-02
  • 微信小程序如何使用scroll-view横向滑动嵌套for循环
    这篇文章主要介绍了微信小程序如何使用scroll-view横向滑动嵌套for循环,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1、布局及样式...
    99+
    2024-04-02
  • 微信小程序如何实现前台循环数据绑定
    这篇文章将为大家详细讲解有关微信小程序如何实现前台循环数据绑定,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。微信小程序之前台循环数据绑定微信小程序的循环数据绑定到wxml...
    99+
    2024-04-02
  • 微信小程序-for循环
    微信小程序-for循环 通过wx:for可以根据指定的数组,循环渲染重复的组件结构,语法示例如下: ...
    99+
    2023-08-19
    微信小程序 小程序
  • 微信小程序实现时间选择
    本文实例为大家分享了微信小程序实现时间选择的具体代码,供大家参考,具体内容如下  xml:  <view class="day-check" style=...
    99+
    2024-04-02
  • 微信小程序实现课程选择器
    本文实例为大家分享了微信小程序实现课程选择器的具体代码,供大家参考,具体内容如下 话不多说,直接上效果图 代码如下 wxml <view class="urg_input"&...
    99+
    2024-04-02
  • 微信小程序如何实现双层嵌套菜单栏
    这篇文章主要介绍“微信小程序如何实现双层嵌套菜单栏”,在日常操作中,相信很多人在微信小程序如何实现双层嵌套菜单栏问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序如何实现双层嵌套菜单栏”的疑惑有所帮助!...
    99+
    2023-07-02
  • 微信小程序自定义tab实现多层tab嵌套
    本文实例为大家分享了微信小程序自定义tab实现多层tab嵌套的具体代码,供大家参考,具体内容如下 仅供参考,刚学,不对的地方希望交流学习 HTML: <template>...
    99+
    2024-04-02
  • 微信小程序实现多列选择器
    本文实例为大家分享了微信小程序实现多列选择器的具体代码,供大家参考,具体内容如下 <picker class="picks" mode="multiSelector" bind...
    99+
    2024-04-02
  • 微信小程序picker选择器怎么实现
    本篇内容主要讲解“微信小程序picker选择器怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序picker选择器怎么实现”吧!picker选择器分为三种,普通选择器,时间选择器,...
    99+
    2023-06-26
  • 微信小程序实现日期范围选择
    本文实例为大家分享了微信小程序实现日期范围选择的具体代码,供大家参考,具体内容如下 样式如下: 分别点击开始日期和结束日期选择时间(底部弹框): date.wxml:  <...
    99+
    2024-04-02
  • 微信小程序怎么自定义tab实现多层tab嵌套
    这篇“微信小程序怎么自定义tab实现多层tab嵌套”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序怎么自定义tab实...
    99+
    2023-07-02
  • 微信小程序城市选择器如何实现
    这篇文章主要讲解了“微信小程序城市选择器如何实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序城市选择器如何实现”吧!城市选择器 region//index.wxml<pic...
    99+
    2023-06-26
  • 微信小程序里面怎么嵌套html页面
    使用web-view标签实现在小程序中嵌入html网页如:<web-view src="https://www.baidu.com"></web-view>使用微信小程序正式号时,需要将...
    99+
    2024-04-02
  • 微信小程序如何实现给嵌套template模板传递数据的方式有哪些
    小编给大家分享一下微信小程序如何实现给嵌套template模板传递数据的方式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!...
    99+
    2024-04-02
  • 微信小程序如何实现日期范围选择
    本篇内容介绍了“微信小程序如何实现日期范围选择”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!样式如下:分别点击开始日期和结束日期选择时间(底...
    99+
    2023-07-02
  • 在微信小程序使用picker实现日期选择
    微信小程序开发项目中,或多或少要使用时间选择器picker实现日期选择。选择开始日期和结束日期 而且选择开始时间后,选择结束时间,能够选择的日期不能比开始日期还要早。要实现以上效果可这样写: 在wxml中写 ...
    99+
    2023-08-25
    微信小程序 小程序 前端
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作