小程序tab

小程序商品分类功能

wxml

<view class="tab">
<!-- 按钮顶部 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>
<!-- 写入内容 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">
        <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>

</view>

wxss

/* 按钮顶部 */
.tab{
  background: #fff;
  display: flex;
  height: 400rpx;
}
.btn{
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}
.btn-list {
  width: 30%;
  height: 100%;
  background: #dddddd;
  overflow: scroll;
}
.active {
  color: #F65959;
  background: #fff;
}
 
/* 写入内容 */
.con {
  width: 65%;
  padding: 0 20rpx;
  height: 100%;
  overflow: scroll;
}

.con-list {
  overflow: scroll;
  display: flex;
  padding: 26rpx 19rpx;
  border: 1rpx solid #EEEEEE;
  background: #fff;
  margin-top: 10rpx;
  border-radius: 10rpx;
}
.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: ["好好学习", "优益C", "买个电车吧",'今年几岁了','简系列'], 
    indexs: 0,
    list: [
      [
        {
          goods: "你们玩吧，我不玩了",
          is_merchant: 0,
          praise: 0,
          time: "今天 15:07",
          reply_list: [ {},{},],
        },
        {
          goods: "我要赚钱给我未来老公买奥迪买宝马",
          is_merchant: 1,
          time: "今天 15:07",
          reply_list: [ {}, {},  {},],
        },
        {
          goods: "买意大利炮",
          is_merchant:2,
          time: "今天 15:07",
          reply_list: [{},],
        },

      ],
      [
        {
          goods: "优益C",
          is_merchant: 0,
          time: "今天 15:07",
          reply_list: [ {}, ],
        },
        {
          goods: "娃哈哈",
          is_merchant: 1,
          time: "今天 15:07",
          reply_list: [
            {},
          ],
        },
 
      ],
      [
        {
          goods: "小刀电动车没电还能跑",
          is_merchant: 0,
          time: "今天 15:07",
          reply_list: [{},{},],
        },
        {
          goods: "小刀电动车没电跑不了",
          is_merchant: 1,
          time: "今天 15:07",
          reply_list: [],
        },
      ],
      [
        {
          goods: "你几岁了",
          is_merchant: 0,
          reply_list: [{}],
          time: "今天 15:07",
        },
        {
          goods: "今年十八",
          is_merchant: 1,
          time: "今天 15:07",
          reply_list: [{}],
        },
      ],
      
    ]
  },
  // 按钮切换
  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 () {
 
  }
})