uniapp 实现切屏与触底刷新

在用uniapp开发小程序或者app的时候，少不了类似于选项卡的页面，需要实现点击选项卡切屏，滑动切屏，并且如果是列表的话还要做上拉加载。那么我们就在这里整理一下如何使用uniapp来实现这些需求。

首先选项卡点击切屏的实现,h5代码，其中cur-style是选中的导航样式，default-style是未被选中的样式。tabItems是选项卡导航栏的数组，tabSelect是点击切换事件。

<view class="cu-item"
			 :class="index==tabCur?'cur-style':'default-style'"
			 v-for="(item,index) in tabItems"
			 :key="index"
			 @tap="tabSelect"
			 :data-id="index">
				{
  {item}}
				<view class="border"
				 :class="index==tabCur?'cur-style':'default-style'"></view>
</view>

data数据

data() {
    return {
        tabCur: 0,    //当前选中的第几页
        tabItems: ['推荐', '赛事']    //导航栏数组
    }
}

tabSelect函数