广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

微信小程序同模块同方向双滑动,swiper嵌套swiper
发布日期:2025-01-26 13:27:10 浏览次数: 929 来源:枫瑞博客网

每个人在成为自我之前,都必须打破之前固有的东西。这些经历并非肉眼可见,却是命运内在而本质的脉络


# 提前总结

基本没有这种反人类设计


# 描述

有这个想法是因为想修改热门置顶模块,问了一圈后发现很少有这种设计,一来,同方向的双层滑动对开发或交互时很不友好,事件还有分内外层好内耗开发者;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
绝大多数的做法都是换其他方案,或者2个滑动滑动方向不同;例如轮播左右滑动,里面的列表时上下滑动‍‍‍‍‍‍‍‍‍‍‍

来看下灵沐上的案例,他外侧是一个轮播组建,内部是swiper滑动组建;在互动过程中,如果在文章位置,是先滑动文章列表如果列表没了,就会滑动轮播‍‍‍‍‍‍‍‍


# 案例

为了方案使用uni-app示例,使用了scroll-view滚动,只有移动端有效果,PC是没效果的‍‍‍‍‍‍‍‍‍‍

<template><view><!-- 注:scroll-view滚动只有移动端有效果 --><view class="uni-margin-wrap"><!-- 外部滚动 --><swiper class="swiper" next-margin="80rpx"><swiper-item><view class="swiper-item uni-bg-red"><!-- 内部滚动 --><scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120"><view class="scroll-view-item_H fr-bg">A</view><view class="scroll-view-item_H fr-bg">B</view><view class="scroll-view-item_H fr-bg">C</view></scroll-view></view></swiper-item><swiper-item><view class="swiper-item uni-bg-green">B</view></swiper-item><swiper-item><view class="swiper-item uni-bg-blue">C</view></swiper-item></swiper></view></view></template><script>export default {data() {return {}},methods: {}}</script><style>.uni-margin-wrap {width: 690rpx;width: 100%;}
.swiper {height: 300rpx;}
.swiper-item {display: block;height: 300rpx;width: 94%;margin-left: 3%;border-radius: 40rpx;text-align: center;color: #fff;}
.uni-bg-blue {background-color: blue;}
.uni-bg-green {background-color: green;}
.uni-bg-red {background-color: red;}

.scroll-view_H {white-space: nowrap;width: 100%;}
.scroll-view-item_H {display: inline-block;height: 160rpx;margin-top: 80rpx;margin-bottom: 40rpx;}.fr-bg{background-color: #fff;border-radius: 30rpx;margin-right: 30rpx;width: 260rpx;}</style>

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!