微信小程序实现tab切换和for循环嵌套
我们先来看看效果
接下来看看怎么实现的吧
wxml
{{item}}
{{item.goods}}
{{item.time}}
已有{{item.reply_list.length}}个回答
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;
}js
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