小程序
小游戏
企业微信
微信支付
扫描小程序码分享
希望做出像大众点评首页一样的效果，点击tab文字“推荐”、“附近”可以切换tab，左右滑动也能切换tab，同时在页面往下的时候“推荐”、“附近”的tab按钮能固定在顶部不出去。
参考 https://blog.csdn.net/jian_xi/article/details/77600139 做出了左右滑动tab的效果，但swiper必须指定高度，就没法结合position:sticky在tab上方有内容时做出tab吸顶的效果
小程序有办法实现吗？
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
自己写都是能实现的，不过左右能滑动的情况下，左右滑和上下滑怎么区分呢，优先级怎么算？总不能上下滚动的时候突然切换左右了，体验非常差的。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
想问下该功能实现了吗
这个貌似很简单，swiper的高度可以通过 获取设备的高度 减掉 tab 的高度 就完事了
我感觉就是这样子操作哈哈哈哈
注：
1、tab的高度 需通过 获取dom节点信息api来获取准确的高度信息
2、屏幕高度的信息可以通过获取设备信息的api来获取
大概能猜出你们卡在哪了。
swiper是可以自适应高度的，用flex:1可以影响。请参考：
https://developers.weixin.qq.com/community/develop/article/doc/00006c73684e7857aceb6624251813
然后你就用这个组件：
https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/tabs.html
<view style="height: 100%;display: flex;flex-direction: column;">
<swiper style="flex:1">
<swiper-item>
<view wx:for="{{[0,1,2,3,4,5,6,7,8,9,10]}}">{{item}}</view>
</swiper-item>
</swiper>
</view>
page {
height: 100%;
}
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
自己写都是能实现的，不过左右能滑动的情况下，左右滑和上下滑怎么区分呢，优先级怎么算？总不能上下滚动的时候突然切换左右了，体验非常差的。
想问下该功能实现了吗
这个貌似很简单，swiper的高度可以通过 获取设备的高度 减掉 tab 的高度 就完事了
我感觉就是这样子操作哈哈哈哈
注：
1、tab的高度 需通过 获取dom节点信息api来获取准确的高度信息
2、屏幕高度的信息可以通过获取设备信息的api来获取
大概能猜出你们卡在哪了。
swiper是可以自适应高度的，用flex:1可以影响。请参考：
https://developers.weixin.qq.com/community/develop/article/doc/00006c73684e7857aceb6624251813
然后你就用这个组件：
https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/tabs.html
<view style="height: 100%;display: flex;flex-direction: column;"><swiper style="flex:1"><swiper-item><view wx:for="{{[0,1,2,3,4,5,6,7,8,9,10]}}">{{item}}</view></swiper-item></swiper></view>page {height: 100%;}