微信小程序 - tab选项卡切换的实现方法

页面效果

大体思路

1. 首先是把新闻的内容，还有活动的内容都列到wxml上
2. 然后把tab写出来。现在的难点是如何把tab和下面的内容联系起来
3. 我们定义一个公共变量，变量名是state，当state= ‘news’ 的时候，显示新闻的内容，当state= ‘conference’ 的时候，显示活动内容
4. 怎么在点击tab切换的时候，改变对应的state的值呢 ？
   (1)首先是给新闻和活动加一个date-state属性，属性的值分别代表了新闻和活动
   (2)其次需要一个点击方法，当点击新闻的时候，就通过setData : state(变量名)=新闻(变量值) ,变量值是通过 e.currentTarget.dataset 来获取对应的值。
5. 点击赋值之后，此时变量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-view
   refresher-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: '2020-05-11 09:54:07', name: '小魔女', cloudNum: 256, join: 8},
      {type: '供', address: '北京、北京、北京、北京、北京、北京、北京', work: '服务员、服务员、服务员、服务员、服务员、服务员', remark: '2344234234234234', img: '../../images/banner2.jpg', title: '产品上线的7个惨痛的教训，说多了都是眼泪', time: '2020-05-11 09:54:07', name: '小魔女', cloudNum: 256, join: 8},
      {type: '供', address: '北京、北京、北京、北京、北京、北京、北京', work: '服务员、服务员、服务员、服务员、服务员、服务员', remark: '2344234234234234', img: '../../images/banner2.jpg', title: '产品上线的7个惨痛的教训，说多了都是眼泪', time: '2020-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.weixin.qq.com/miniprogram/dev/component/scroll-view.html