页面效果
大体思路
首先是把新闻的内容，还有活动的内容都列到wxml上然后把tab写出来。现在的难点是如何把tab和下面的内容联系起来我们定义一个公共变量，变量名是state，当state= ‘news’ 的时候，显示新闻的内容，当state= ‘conference’ 的时候，显示活动内容怎么在点击tab切换的时候，改变对应的state的值呢 ？
(1)首先是给新闻和活动加一个date-state属性，属性的值分别代表了新闻和活动
(2)其次需要一个点击方法，当点击新闻的时候，就通过setData : state(变量名)=新闻(变量值) ,变量值是通过 e.currentTarget.dataset 来获取对应的值。点击赋值之后，此时变量state的值会发生改变，wxml根据state的值来显示对应的内容。
当state=新闻，就显示新闻内容，当state=活动，就显示活动内容
上代码
wxml
<view class="myTaber2"><view class="top"><block wx:for="{{tabList}}" wx:key="*this"><view class="{{state === item.index ? 'scroll_item active':'scroll_item'}}" bindtap="taberTop" data-state="{{item.index}}">{{item.name}}</view></block></view><scroll-viewrefresher-triggered='{{refreshState}}'refresher-enabled='{{true}}' bindrefresherrefresh='refresh'bindscrolltolower='toBottom'scroll-y='{{true}}'><view wx:if="{{state === 'news'}}"><block wx:for="{{list}}" wx:key="*this"><news-item msg="{{item}}" /></block></view><view wx:if="{{state === 'conference'}}"><block wx:for="{{list}}" wx:key="*this"><cooperate-item msg="{{item}}" /></block></view></scroll-view></view>
js文件
Page({/*** 页面的初始数据*/data: {state:"news",tabList:[{name:'新闻',index:'news'},{name:'活动',index:'conference'}],list:[{type: '供', address: '北京、北京、北京、北京、北京、北京、北京', work: '服务员、服务员、服务员、服务员、服务员、服务员', remark: '2344234234234234', img: '../../images/banner2.jpg', title: '产品上线的7个惨痛的教训，说多了都是眼泪', time: '-05-11 09:54:07', name: '小魔女', cloudNum: 256, join: 8},{type: '供', address: '北京、北京、北京、北京、北京、北京、北京', work: '服务员、服务员、服务员、服务员、服务员、服务员', remark: '2344234234234234', img: '../../images/banner2.jpg', title: '产品上线的7个惨痛的教训，说多了都是眼泪', time: '-05-11 09:54:07', name: '小魔女', cloudNum: 256, join: 8},{type: '供', address: '北京、北京、北京、北京、北京、北京、北京', work: '服务员、服务员、服务员、服务员、服务员、服务员', remark: '2344234234234234', img: '../../images/banner2.jpg', title: '产品上线的7个惨痛的教训，说多了都是眼泪', time: '-05-11 09:54:07', name: '小魔女', cloudNum: 256, join: 8},],refreshState: false,},taberTop:function(e){console.log(e);this.setData({state: e.currentTarget.dataset.state})},refresh:function(e){this.setData({refreshState: true})setTimeout(() =>{this.setData({refreshState: false})},2000)},toBottom(e) {//到底部console.log(e)},})
wxss文件
.top{display: flex;flex-direction: row;flex-wrap: nowrap;.scroll_item{width: 50%;text-align: center;font-size: 34rpx;line-height: 80rpx;}.active{background: #F79156;color: #fff;}}
关于scroll-view
可参考微信官方给出的方法使用
https://developers./miniprogram/dev/component/scroll-view.html
