中文字幕一区二区三区在线中文-日本中文字幕 在线观看-欧美日韩国产亚洲综合-性色AV一二三天美传媒

廣州總部電話：020-85564311
20年
互聯(lián)網(wǎng)應(yīng)用服務(wù)商
廣州總部電話：020-85564311
20年
互聯(lián)網(wǎng)應(yīng)用服務(wù)商
請輸入搜索關(guān)鍵詞
知識庫 知識庫

優(yōu)網(wǎng)知識庫

探索行業(yè)前沿，共享知識寶庫

微信小程序同模塊同方向雙滑動，swiper嵌套swiper

發(fā)布日期：2025-01-26 13:27:10 瀏覽次數(shù)： 1078 來源：楓瑞博客網(wǎng)

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


# 提前总结

基本没有这种反人类设计


# 描述

有这个想法是因为想修改热门置顶模块，问了一圈后发现很少有这种设计，一来，同方向的双层滑动对开发或交互时很不友好，事件还有分内外层好内耗开发者；‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
绝大多数的做法都是换其他方案，或者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>

優(yōu)網(wǎng)科技，優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商

優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實的服務(wù)了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！

優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。


我要投稿

姓名

文章鏈接

提交即表示你已閱讀并同意《個人信息保護聲明》

專屬顧問 專屬顧問
掃碼咨詢您的優(yōu)網(wǎng)專屬顧問！
專屬顧問
馬上咨詢
聯(lián)系專屬顧問
聯(lián)系專屬顧問
聯(lián)系專屬顧問
掃一掃馬上咨詢
掃一掃馬上咨詢

掃一掃馬上咨詢

和我們在線交談!