在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
一、左右页面滑动切换的实现1、页面实现左右滑动切换的效果,小程序提供了swiper标签来实现,swiper标签中current属性可以指定tab表示当前的滑块,current属性值动态改变,以此实现左右滑动切换的效果,如下图所示 这是swiper标签的官方文档https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html 2、swiper中有一个swiper-item标签用来设置swiper中tab相对应页面的内容,并且swiper中只可以放置swiper-item组件,如下图,详细文档见上面swiper官方文档链接 3、swiper-item的高度自动设置100%,也就是父元素的高度,但是我们风声小程序中风声列表要上拉加载,高度未知,高度其实是由子元素决定的,也就是说swiper的高度是由子元素swiper-item决定的,相互矛盾,无法获取高度,该方案不可行 swiper适合固定高度的左右滑动,比如轮播图 4、左右滑动切换的效果不用swiper,用css3中transform属性或许可以实现左右滑动的效果,但是会很麻烦 二、比较其它小程序中关于左右滑动切换与列表加载1、观察比较找到了两个功能相似的小程序,一个是今日头条,一个是知乎热榜 2、其中知乎热榜中热榜和为你推荐有左右滑动切换的效果,也有搜索框,与风声小程序不同的是热榜与为你推荐两个tab是不滚动的,搜索框及tab中的内容滚动 3、今日头条与知乎类似,tab不滚动,tab内容区滚动 三、tab不滚动,tab内容区滚动的实现方法1、左右滑动切换的交互依然使用swiper,其中也依然用swiper-item来实现滑动切换,但是页面不滚动,所以知道swiper的高度,就是tab以下区域的屏幕高度,然后在swiper-item中使用scroll-view标签 如上图所示,scroll-view标签中scroll-y属性可以设置纵向滚动,以此实现上拉加载效果,具体scroll-view的官方文档链接如下,这个方法比css3动画实现简单很多 https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
|
请发表评论