背景是这样的，微信小程序有一个tab切换页面，tab切换页面有两个内容框，我是使用scroll-view进行制作，然后在切换tab页面时，相应的scroll-view里的滚动条需要置顶处理。【相关学习推荐：小程序开发教程】
我们可以看到官方文档描述scroll-view里有一个scroll-into-view属性，该属性的燃扒高描述如下
scroll-into-view的值应为皮尺某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
那么我们可以在这个属性里大作文章，只要在scroll-view里放置一个id值为设置的一个自定义值就可以实现切换tab时，对应的内容框滚动条都自动滚到顶部，如下面代码所示，下面代码是我使用Taro小程序框架演示的，原生的也同理。
import Taro from '@Tarojs/Taro'
import { View } from '@Tarojs/components'
import { AtTabs, AtTabsPane } from 'Taro-ui'
export default class Index extends Taro.Component {
constructor () {
super(...arguments)
this.state = {
current: 0,
}
}
handleClick (value) {
this.setState({
current: value
})
}
render () {
const tabList = [{ title: '标签第一页' }, { title: '标签第二页' }, { title: '标签第三页' }]
return (
<AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
<AtTabsPane current={this.state.current} index={0} >
<ScrollView scrollY scrollIntoView='content-0'>
<View id='content-0'></View>
标签页一的内容
</ScrollView>
</AtTabsPane>
<AtTabsPane current={this.state.current} index={1} >
<ScrollView scrollY scrollIntoView='content-1'>
<View id='content-1'></View>
标签页二的内容
</ScrollView>
</AtTabsPane>
<AtTabsPane current={this.state.current} index={2} >
<ScrollView scrollY scrollIntoView='content-2'>
<View id='content-2'></View>
标签页三的内容
</ScrollView>
</AtTabsPane>
</AtTabs>
)
}
}
如第一个tab的scroll-view里放置一个id值为content-0的view，那么在切换tab页时，scroll-view会根据我们设置的scroll-into-view属性定位到子元素的id上，到达滚动条自动置顶的效果此卖
<AtTabsPane current={this.state.current} index={0} >
<ScrollView scrollY scrollIntoView='content-0'>
<View id='content-0'></View>
标签页一的内容
</ScrollView>
</AtTabsPane>
同理的，假如需要滚动条滚到最低下，把相应的子元素id放到最低下即可，例如某些聊天界面，需要定位到最新那条
<AtTabsPane current={this.state.current} index={0} >
<ScrollView scrollY scrollIntoView='content-0'>
标签页一的内容
<View id='content-0'></View>
</ScrollView>
</AtTabsPane>
更多编程相关知识，请访问：编程视频！！
下图是小程序 小米Lite 的 Tab 切换效果：切换 Page 时，Tab 下方的指示器（红色横条）是没有滚动效果而是直接闪现到下一个 Page 的，这也是市面上小程序常见的 Tab 切换效果。
原生端 TabLayout 常见的功能就是我们的目标效果，所以 目标效果 如下：
通过了解小程序组件及技术支持，选定通过 scroll-view 、swiper 、swiper-item 、movable-area 、movable-view 配合 插槽 和 抽象节点 来实现自定义组件 tab-layout 。
具体如下图所示 ：
主要实现（点击跳转查看源码）
1.复制 tab-layout 组件到项目中 （点击跳转至源码 TabLayout 目录）
4.在布局文件中使用 TabLayout 组件，并通过抽象节点 generic:item-tab 和 generic:item-page 分别与自定义的 Tab 和 Page 绑定
5.使用自闹纯定义属性 indexAreaHeight 为 Index 及其活动区域设置高度
6.使用自定义属性 tabList 设置数据源，根据数据源将自动生成对应数量的乱举 Tab 和 Page
7.按需选择可采用插槽 slot = "index" 或自定义属性 indexStyle 设置 Index 的样式
布局文件 index.wxml 中：
样式文件 index.wxss 中
布局文件 index.wxml 中
PS： 还有一个很重要的方法 onPageUpdata ，用于抽象节点 item-tab 和 item-page 通知父节点 tab-layout 刷新数据，在子控件中通过 this.triggerEvent("updata") 触发
可能出现问题：
1. 当 item-page 中存在竖直滚动的 scroll-view 时出现滑动冲突哗弯碧该如何解决？
在 item-page 组件 attached 方法中按需为 scroll-view 设置固定高度或占满屏幕剩余位置 （点击跳转查看参考写法）
2.当 item-page 或 item-tab 中调用 this.setData ( ) 之后，发现自定义属性 item 获取值为 null ?
出现该种情况，应在 this.setData ( ) 之后，执行 this.triggerEvent("updata") 触发 tab-layout 的 onPageUpdata 方法重新得到 item 值
3.如何实现 " 懒加载 " ，即当 Tab 首次被选中时，才进行对应 Page 的数据加载？
为自定义组件 item-page 设置一个懒加载标志位暂定为 isLoadData ，通过订阅自定义属性 currentIndex ，在 currentIndex 属性变化或组件进行到 attached 生命周期时，通过判断 isLoadData 和 currentIndex 是否与 position 相等来进行数据加载并调整标志位 （点击跳转查看参考写法）
在小程序越来越普及的现状下，如何使得小程序能给用户带来更完善的显示效果和使用体验，是每一个开发者都应该力尽其责的事。鉴于本人当前对小程序和网页端的熟悉程度，该组件或许还存在很多瑕疵，如有更好的见解或建议，欢迎留言。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）