• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序左右滑动切换页面

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、左右页面滑动切换的实现

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
今起小程序可实现AR效果:口红实时试色发布时间:2022-07-18
下一篇:
微信小程序布局学习笔记发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap