微信小程序实现tab切换和for循环嵌套

电玩女神 2023-02-16 09:30 10阅读 0赞

我们先来看看效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

接下来看看怎么实现的吧

wxml

<view class="btn-list">
      <block wx:for="{
       {tabs}}" wx:key="{
       {index}}">
        <view class="btn {
       {indexs==index? 'active': ''}}" bindtap="chooseBtn" data-current="{
       {index}}">
          <view>{
       {item}}</view>
          <view class="{
       {indexs==index? 'decorative': ''}}"></view>
        </view>
      </block>
    </view>
    
    
    
    <view class="con">
      <view class="{
       {indexs==index? 'show': 'hide'}}" wx:for="{
       {list}}" wx:key="index">
        <block wx:for="{
       {item}}" wx:key="num">
          <view class="con-list">
            <image class="goods-img" src="{
       {item.img}}"></image>
            <view class="goods">
              <view class="goods-con">{
       {item.goods}}</view>
              <view class="goods-b">
                <view>{
       {item.time}}</view>
                <view>已有{
       {item.reply_list.length}}个回答</view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>

wxss

/* 按钮顶部 */
    .btn-list {
      background: #FFFFFF;
      padding: 44rpx 20rpx 0;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      color: #000000;
      font-weight: bold;
      font-family: "PingFang-SC-Bold";
      border-top: 1rpx solid #EEEEEE;
    }
    .btn-list .btn {
      padding: 0 50rpx 26rpx;
      border-bottom: 1rpx solid #EEEEEE;
    }
    .decorative {
      width: 32rpx;
      height: 4rpx;
      background: #FE595D;
      border-radius: 2rpx;
      margin: 11rpx auto 0;
    }
    .active {
      color: #F73A3F;
    }
    
    /* 写入内容 */
    .con {
      background: #FFFFFF;
      padding: 0 20rpx;
    }
    .con-list {
      display: flex;
      padding: 26rpx 19rpx;
      border-bottom: 1rpx solid #EEEEEE;
    }
    .goods-img {
      width: 124rpx;
      height: 124rpx;
      border-radius: 6rpx;
      margin-right: 22rpx;
    }
    .goods {
      width: 80%;
      padding-top: 13rpx;
    }
    .goods-con {
      font-size: 28rpx;
      color: #000000;
      font-weight: bold;
    }
    .goods-b {
      width: 100%;
      font-size: 20rpx;
      display: flex;
      justify-content: space-between;
      margin-top: 46rpx;
    }
    .goods-b view:nth-child(1) {
      color: #999999;
    }
    .goods-b view:nth-child(2) {
      color: #F73C41;
    }
    .show {
      display: block;
    }
    .hide {
      display: none;
    }

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        tabs: ["我的提问", "我的关注", "我的问答"], 
        indexs: 0,
        list: [
          [
            {
              goods: "洗白白白白白白白",
              img: "../../../img/00.jpg",
              is_merchant: 0,
              isOpen: false,
              change: false,
              praise: 0,
              appraise_content: "相信经常不化妆的小仙女都知道眉毛的重要性, 明人不说暗话,今天小编就来给推一推哪些优惠的眉笔吧!!!",
              reply_list: [
                { nickname: "太白金星", img: "../../../img/00.jpg", reply_content: "我也是这么觉得", changes: false, praise: 0, time: "05-25" },
                { nickname: "太白金星", img: "../../../img/00.jpg", reply_content: "我也是这么觉得", changes: false, praise: 0, time: "05-25" },
    
              ],
              time: "今天 15:07",
            },
            {
              goods: "洗白白白白白白白",
              img: "../../../img/00.jpg",
              is_merchant: 1,
              isOpen: false,
              change: false,
              praise: 0,
              appraise_content: "相信经常不化妆的小仙女都知道眉毛的重要性, 明人不说暗话,今天小编就来给推一推哪些优惠的眉笔吧!!!",
              reply_list: [
                { nickname: "太白金星", img: "../../../img/00.jpg", reply_content: "我也是这么觉得", changes: false, time: "05-25", praise: 0, },
                { nickname: "太白金星", img: "../../../img/00.jpg", reply_content: "我也是这么觉得", changes: false, praise: 0, time: "05-25" },
                { nickname: "太白金星", img: "../../../img/00.jpg", reply_content: "我也是这么觉得", changes: false, praise: 0, time: "05-25" },
              ],
              time: "今天 15:07",
            },
    
          ],
          [
            {
              goods: "我的关注洗白白白白白白白",
              img: "../../../img/00.jpg",
              is_merchant: 0,
              isOpen: false,
              change: false,
              praise: 0,
              appraise_content: "相信经常不化妆的小仙女都知道眉毛的重要性, 明人不说暗话,今天小编就来给推一推哪些优惠的眉笔吧!!!",
              reply_list: [
                { nickname: "太白金星", img: "../../../img/00.jpg", reply_content: "我也是这么觉得", changes: false, praise: 0, time: "05-25" },
                { nickname: "太白金星", img: "../../../img/00.jpg", reply_content: "我也是这么觉得", changes: false, praise: 0, time: "05-25" },
    
              ],
              time: "今天 15:07",
            },
            {
              goods: "洗白白白白白白白",
              img: "../../../img/00.jpg",
              is_merchant: 1,
              isOpen: false,
              change: false,
              praise: 0,
              appraise_content: "相信经常不化妆的小仙女都知道眉毛的重要性, 明人不说暗话,今天小编就来给推一推哪些优惠的眉笔吧!!!",
              reply_list: [
                { nickname: "太白金星", img: "../../../img/00.jpg", reply_content: "我也是这么觉得", changes: false, time: "05-25", praise: 0, },
                { nickname: "太白金星", img: "../../../img/00.jpg", reply_content: "我也是这么觉得", changes: false, praise: 0, time: "05-25" },
                { nickname: "太白金星", img: "../../../img/00.jpg", reply_content: "我也是这么觉得", changes: false, praise: 0, time: "05-25" },
              ],
              time: "今天 15:07",
            },
    
          ],
          [
            {
              goods: "我的问答洗白白白白白白白",
              img: "../../../img/00.jpg",
              is_merchant: 0,
              isOpen: false,
              change: false,
              praise: 0,
              appraise_content: "相信经常不化妆的小仙女都知道眉毛的重要性, 明人不说暗话,今天小编就来给推一推哪些优惠的眉笔吧!!!",
              reply_list: [
                { nickname: "太白金星", img: "../../../img/00.jpg", reply_content: "我也是这么觉得", changes: false, praise: 0, time: "05-25" },
                { nickname: "太白金星", img: "../../../img/00.jpg", reply_content: "我也是这么觉得", changes: false, praise: 0, time: "05-25" },
    
              ],
              time: "今天 15:07",
            },
            {
              goods: "洗白白白白白白白",
              img: "../../../img/00.jpg",
              is_merchant: 1,
              isOpen: false,
              change: false,
              praise: 0,
              appraise_content: "相信经常不化妆的小仙女都知道眉毛的重要性, 明人不说暗话,今天小编就来给推一推哪些优惠的眉笔吧!!!",
              reply_list: [
                { nickname: "太白金星", img: "../../../img/00.jpg", reply_content: "我也是这么觉得", changes: false, time: "05-25", praise: 0, },
                { nickname: "太白金星", img: "../../../img/00.jpg", reply_content: "我也是这么觉得", changes: false, praise: 0, time: "05-25" },
                { nickname: "太白金星", img: "../../../img/00.jpg", reply_content: "我也是这么觉得", changes: false, praise: 0, time: "05-25" },
              ],
              time: "今天 15:07",
            },
    
          ],
        ]
      },
      // 按钮切换
      chooseBtn: function(e) {
        var current = e.currentTarget.dataset.current;
        this.setData({
          indexs: current,
        })
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

QQ群:  1102727334

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020060915571893.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200609155726149.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70