wxml
<!-- 选项卡 -->
<view>
<scroll-view scroll-x="true" class="nav" scroll-left="{{scrollLeft}}" scroll-with-animation="{{true}}">
<block wx:for="{{navDataArr}}">
<view class="nav-item {{currentTab == index ?'active1':''}}" data-current="{{index}}" data-id="{{item.id}}" bindtap="switchNav">{{item.name}}</view>
</block>
</scroll-view>
<swiper class="tab-box" current="{{currentTab}}" duration="300" style='height:{{height}}rpx;' bindchange="switchTab">
<!-- 精品论坛 -->
<swiper-item>
<view class="products-box">
<block wx:for="{{jpData}}" wx:key='item'>
<view class='products-item' style='overflow:hidden;' data-key='{{index}}' data-id="{{item.id}}">
<view bindtap="toDetail" data-id="{{item.id}}">
<view class='title'>
{{item.title}}
</view>
<view class='content'>
{{item.content}}
</view>
<view class='imgs'>
<view wx:if='{{item.images.length==1}}'>
<block wx:for="{{item.images}}" wx:key='item'>
<image class='one' style='width:694rpx;height:504rpx;display:block;margin:auto;' src='{{item}}'></image>
</block>
</view>
<view wx:else>
<block wx:for="{{item.images}}" wx:key='item'>
<image src='{{item}}'></image>
</block>
</view>
</view>
</view>
<view class='boxs'>
<view class='v1' bindtap="toDetail" data-id="{{item.id}}">
<image src='../../imgs/huifu.png'></image>
<text>{{item.evaluate_count}}</text>
</view>
<view class='v2' bindtap='collect' data-key="{{index}}" data-id="{{item.id}}">
<image src='../../imgs/collect.png'></image>
<text>{{item.collect_count}}</text>
</view>
<view class='v3' bindtap='zan' data-key='{{index}}' data-id="{{item.id}}">
<image src='{{zan}}'></image>
<text>{{item.like_count}}</text>
</view>
<view class='v4' wx:if='{{item.is_jp==1}}'>精</view>
<view class='v6'>{{item.create_time}}</view>
<view class='v5'>{{item.user.nickname}} </view>
</view>
</view>
</block>
</view>
</swiper-item>
<!--热门咨询 -->
<swiper-item>
<view class="products-box">
<block wx:for="{{otherData}}" wx:key='item'>
<view class='products-item' style='overflow:hidden;' data-id="{{item.id}}">
<view bindtap="toDetail" data-id="{{item.id}}">
<view class='title'>
{{item.title}}
</view>
<view class='content'>
{{item.content}}
</view>
<view class='imgs'>
<view wx:if='{{item.images.length==1}}'>
<block wx:for="{{item.images}}" wx:key='item'>
<image class='one' style='width:694rpx;height:504rpx;display:block;margin:auto;' src='{{item}}'></image>
</block>
</view>
<view wx:else>
<block wx:for="{{item.images}}" wx:key='item'>
<image src='{{item}}'></image>
</block>
</view>
</view>
</view>
<view class='boxs'>
<view class='v1' bindtap="toDetail" data-id="{{item.id}}">
<image src='../../imgs/huifu.png'></image>
<text>{{item.evaluate_count}}</text>
</view>
<view class='v2' bindtap='collect' data-key='{{index}}' data-id="{{item.id}}">
<image src='../../imgs/collect.png'></image>
<text>{{item.collect_count}}</text>
</view>
<view class='v3' bindtap='zan' data-key='{{index}}' data-id="{{item.id}}">
<image src='{{zan}}'></image>
<text>{{item.like_count}}</text>
</view>
<view class='v4' wx:if='{{item.is_jp==1}}'>精</view>
<view class='v6'>{{item.create_time}}</view>
<view class='v5'>{{item.user.nickname}} </view>
</view>
</view>
</block>
</view>
</swiper-item>
<!-- 维修保养 -->
<swiper-item>
<view class="products-box">
<block wx:for="{{otherData}}" wx:key='item'>
<view class='products-item' style='overflow:hidden;' data-id="{{item.id}}">
<view bindtap="toDetail" data-id="{{item.id}}">
<view class='title'>
{{item.title}}
</view>
<view class='content'>
{{item.content}}
</view>
<view class='imgs'>
<view wx:if='{{item.images.length==1}}'>
<block wx:for="{{item.images}}" wx:key='item'>
<image class='one' style='width:694rpx;height:504rpx;display:block;margin:auto;' src='{{item}}'></image>
</block>
</view>
<view wx:else>
<block wx:for="{{item.images}}" wx:key='item'>
<image src='{{item}}'></image>
</block>
</view>
</view>
</view>
<view class='boxs'>
<view class='v1' bindtap="toDetail" data-id="{{item.id}}">
<image src='../../imgs/huifu.png'></image>
<text>{{item.evaluate_count}}</text>
</view>
<view class='v2' bindtap='collect' data-key='{{index}}' data-id="{{item.id}}">
<image src='../../imgs/collect.png'></image>
<text>{{item.collect_count}}</text>
</view>
<view class='v3' bindtap='zan' data-key='{{index}}' data-id="{{item.id}}">
<image src='{{zan}}'></image>
<text>{{item.like_count}}</text>
</view>
<view class='v4' wx:if='{{item.is_jp==1}}'>精</view>
<view class='v6'>{{item.create_time}}</view>
<view class='v5'>{{item.user.nickname}} </view>
</view>
</view>
</block>
</view>
</swiper-item>
<!-- 专题活动 -->
<swiper-item>
<view class="products-box">
<block wx:for="{{otherData}}" wx:key='item'>
<view class='products-item' style='overflow:hidden;' data-id="{{item.id}}">
<view bindtap="toDetail" data-id="{{item.id}}">
<view class='title'>
{{item.title}}
</view>
<view class='content'>
{{item.content}}
</view>
<view class='imgs'>
<view wx:if='{{item.images.length==1}}'>
<block wx:for="{{item.images}}" wx:key='item'>
<image class='one' style='width:694rpx;height:504rpx;display:block;margin:auto;' src='{{item}}'></image>
</block>
</view>
<view wx:else>
<block wx:for="{{item.images}}" wx:key='item'>
<image src='{{item}}'></image>
</block>
</view>
</view>
</view>
<view class='boxs'>
<view class='v1' bindtap="toDetail" data-id="{{item.id}}">
<image src='../../imgs/huifu.png'></image>
<text>{{item.evaluate_count}}</text>
</view>
<view class='v2' bindtap='collect' data-key='{{index}}' data-id="{{item.id}}">
<image src='../../imgs/collect.png'></image>
<text>{{item.collect_count}}</text>
</view>
<view class='v3' bindtap='zan' data-key='{{index}}' data-id="{{item.id}}">
<image src='{{zan}}'></image>
<text>{{item.like_count}}</text>
</view>
<view class='v4' wx:if='{{item.is_jp==1}}'>精</view>
<view class='v6'>{{item.create_time}}</view>
<view class='v5'>{{item.user.nickname}} </view>
</view>
</view>
</block>
</view>
</swiper-item>
<!-- 其他 -->
<swiper-item>
<view class="products-box">
<block wx:for="{{otherData}}" wx:key='item'>
<view class='products-item' style='overflow:hidden;' data-id="{{item.id}}">
<view bindtap="toDetail" data-id="{{item.id}}">
<view class='title'>
{{item.title}}
</view>
<view class='content'>
{{item.content}}
</view>
<view class='imgs'>
<view wx:if='{{item.images.length==1}}'>
<block wx:for="{{item.images}}" wx:key='item'>
<image class='one' style='width:694rpx;height:504rpx;display:block;margin:auto;' src='{{item}}'></image>
</block>
</view>
<view wx:else>
<block wx:for="{{item.images}}" wx:key='item'>
<image src='{{item}}'></image>
</block>
</view>
</view>
</view>
<view class='boxs'>
<view class='v1' bindtap="toDetail" data-id="{{item.id}}">
<image src='../../imgs/huifu.png'></image>
<text>{{item.evaluate_count}}</text>
</view>
<view class='v2' bindtap='collect' data-key='{{index}}' data-id="{{item.id}}">
<image src='../../imgs/collect.png'></image>
<text>{{item.collect_count}}</text>
</view>
<view class='v3' bindtap='zan' data-key='{{index}}' data-id="{{item.id}}">
<image src='{{zan}}'></image>
<text>{{item.like_count}}</text>
</view>
<view class='v4' wx:if='{{item.is_jp==1}}'>精</view>
<view class='v6'>{{item.create_time}}</view>
<view class='v5'>{{item.user.nickname}} </view>
</view>
</view>
</block>
</view>
</swiper-item>
<!-- ceshi -->
<!-- <swiper-item>
<template is="products" data="{{productsArr:otherData}}"></template>
</swiper-item> -->
<!-- ceshi -->
</swiper>
</view>
<!-- 选项卡结束 -->
js页面
// pages/home/home.js
import {
Home
} from 'home-model.js';
var home = new Home(); //实例化 首页 对象
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
currentSwiper: 0,
autoplay: 'true',
// 选项卡开始
// navData: [],
currentTab: 0,
// navScrollLeft: 0,
// lengthList: [], //所有的list列表
zan: 'https://miniprogram02.honda-dreamwing.com.cn/img/zan.png',
zanS: 'https://miniprogram02.honda-dreamwing.com.cn/img/zanS.png',
height: 0,
scrollLeft: 0
// zanS:0//0未点赞 1已经点赞
//选项卡结束
// itemHeight: 10,
// status:0//非车主为0 车主为1
// nickname: '',
},
//轮播图切换指点样式
swiperChange: function(e) {
this.setData({
currentSwiper: e.detail.current
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
//获取论坛分类
home.getFenLei((data) => {
data.push({
id: 555,
name: '精品论坛'
})
that.setData({
navDataArr: data.reverse()
});
});
//获取精品论坛
home.getJingpin((data) => {
that.setData({
jpData: data,
height: data.length * 900
});
});
},
//点击模块标题时,例论坛,咨询。。。
switchNav(event) {
var that = this
that.checkCor();
var cur = event.currentTarget.dataset.current;
var id = event.currentTarget.dataset.id //当前点击的id
//每个tab选项宽度占1/5
var singleNavWidth = that.data.windowWidth / 5;
that.setData({
category_id: id
})
if (that.data.currentTab == cur) {
return false;
} else {
that.setData({
currentTab: cur
})
}
//根据分类搜索帖子
home.getDetailInfo(that.data.category_id, (data) => {
if (that.data.category_id == 555) {
that.setData({
height: that.data.jpData.length * 900
});
} else {
that.setData({
otherData: data,
height: data.length * 900
})
}
})
},
//判断当前滚动超过一屏时,设置tab标题滚动条
checkCor: function () {
if (this.data.currentTab > 2) {
this.setData({
scrollLeft: 300
})
} else {
this.setData({
scrollLeft: 0
})
}
},
//滑动swiper模块时
switchTab(event) {
var that = this
that.checkCor()
var cur = event.detail.current;
// console.log(cur)
var singleNavWidth = that.data.windowWidth / 5;
that.setData({
currentTab: cur,
// navScrollLeft: (cur - 2) * singleNavWidth,
category_id: cur
});
//根据分类搜索帖子
home.getDetailInfo(that.data.category_id, (data) => {
if (that.data.category_id == 555) {
that.setData({
height: that.data.jpData.length * 900
});
} else {
that.setData({
otherData: data
})
that.setData({
height: data.length * 900
})
}
})
},
// 收藏
collect: function(e) {
var that = this
var id = e.currentTarget.dataset.id //当前点击的id
that.setData({
id: id
})
var index = e.currentTarget.dataset.key;
home.getCollect(that.data.id, (data) => {
if (data.code == 201) {
//精品点赞数量+1
that.data.jpData[index].collect_count = that.data.jpData[index].collect_count + 1;
that.setData({
jpData: that.data.jpData
});
// 点赞数量+1结束
//根据分类搜索帖子
that.data.otherData[index].collect_count = that.data.otherData[index].collect_count + 1;
that.setData({
otherData: that.data.otherData
});
} else if (data.msg == "已经收藏") {
app.showTips('提示', '不能重复收藏')
}
})
},
// 点赞
zan: function(e) {
var that = this
var id = e.currentTarget.dataset.id //当前点击的id
that.setData({
id: id
})
var index = e.currentTarget.dataset.key;
home.getZan(that.data.id, (data) => {
console.log(data)
if (data.code == 201) {
//根据分类搜索帖子
//精品点赞数量+1
that.data.jpData[index].like_count = that.data.jpData[index].like_count + 1;
that.setData({
jpData: that.data.jpData
});
// 点赞数量+1结束
//其他帖子开始
that.data.otherData[index].like_count = that.data.otherData[index].like_count + 1;
that.setData({
otherData: that.data.otherData
});
//其他帖子结束
} else if (data.msg == "已经点赞") {
app.showTips('提示', '不能重复点赞')
}
})
},
onShow: function() {
var that = this
// console.log(that.data.category_id)
if (that.data.category_id) {
//根据分类搜索帖子
home.getDetailInfo(that.data.category_id, (data) => {
that.setData({
otherData: data,
height: data.length * 900
})
})
} else {
//获取精品论坛
home.getJingpin((data) => {
console.log(data)
that.setData({
jpData: data,
height: data.length * 900
});
console.log(that.data.height)
});
}
},
})