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

最新推荐文章于 2024-05-28 16:38:52 发布

青衫折扇

最新推荐文章于 2024-05-28 16:38:52 发布

阅读量1.2k

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_42543264/article/details/106644155

版权

小程序专栏收录该内容

91 篇文章 40 订阅

订阅专栏

我们先来看看效果

接下来看看怎么实现的吧

wxml

<!-- 按钮顶部 S -->
<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>
<!-- 按钮顶部 E -->

<!-- 写入内容 S -->
<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>
<!-- 写入内容 E -->

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