微信小程序滚动Tab选项卡:左右滑动切换、触底加载分页
微信小程序滚动Tab选项卡
效果图

```
四、scroll组件触底事件(分页相关)在 scroll 组件中,我们可以通过 `onReachBottom`事件来实现触底加载分页。我们可以通过以下代码创建一个基本的触底事件:
```html
onReachBottom="{{onReachBottom}}"
>
// 在 Page 中定义 onReachBottom 方法Page({
data: {
list: []
},
onReachBottom() {
// 加载下一页数据 this.setData({
list: [...this.data.list, ...newList]
});
}
})
```
五、scroll组件的高度样式
在 scroll 组件中,我们可以通过 `height` 属性来设置其高度。我们可以通过以下代码创建一个基本的高度样式:
```html
height="{{scrollHeight}}"
>
// 在 Page 中定义 scrollHeight 方法Page({
data: {
scrollHeight: '100vh'
}
})
```
六、swiper组件scroll组件样式区别
在 swiper 组件和 scroll 组件中,我们可以通过 `class` 属性来设置其样式。我们可以通过以下代码创建一个基本的样式区别:
```html
>
>
// 在 Page 中定义 swiper 和 scroll 类名Page({
data: {
swiperClass: 'swiper-class',
scrollClass: 'scroll-class'
}
})
```
七、其他
在微信小程序中,我们可以通过 `wx.createSelectorQuery` 方法来获取组件的 DOM 节点。我们可以通过以下代码创建一个基本的 DOM 节点:
```javascriptPage({
data: {
swiperDom: null,
scrollDom: null },
onReady() {
const query = wx.createSelectorQuery();
query.select('.swiper').boundingClientRect((rect) => {
this.setData({
swiperDom: rect });
}).exec();
query.select('.scroll').boundingClientRect((rect) => {
this.setData({
scrollDom: rect });
}).exec();
}
})
```
以上就是微信小程序滚动Tab选项卡的基本实现方法。