uni-app 加载长html文本 scroll-view 改上下滑动为左右翻页

最新推荐文章于 2024-08-05 21:09:49 发布
最新推荐文章于 2024-08-05 21:09:49 发布
阅读量1k 收藏 18
点赞数 6
文章标签： uni-app android html 微信小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35638140/article/details/136042344
版权
本文介绍了如何在微信小程序中使用两个scroll-view实现类似书籍翻页的效果，涉及scroll-top控制、高度计算、滑动监听和禁用手势滑动等技术点。
摘要由CSDN通过智能技术生成

        

        效果如上图，可以通过点击“上一页”、“下一页”两个按钮进行翻页，也可以加上手势及动画让效果更逼真一些，后话少谈。原理其实很简单，就是将一篇html文章，做到了两个scroll-view里面。虽说实际没什么用，但比普通上下滑动加载文章还是要炫酷一些的。下面讲一下主要的实现步骤。

        首先定义两个scroll-view，左右排列，虽说不是上下滑动，但scroll-view是很关键的，需要用到里面的scroll-top属性，scroll、scrolltoupper、scrolltoloweer三个监听方法也很有帮助。        scroll-view需要设置高度，这个高度在文章的最后一页是会变动的，所以要用变量控制，我这边设置的初始高度是260px，而且scroll-view尽量不要有padding，不然会影响每次scroll-top的计算，如果要设置边距可以用margin或者通过父控件控制。因为scroll-view的高度是260px，所以我们把左边scroll-view的初始scroll-top设为0，右边scroll-right的初始scroll-top设置为260，就形成了最顶上那张图的样子。这是第一步。

        翻页也很简单，点击“下一页”的时候，将左边的scroll-top与右边的scroll-top分别加上2倍的260，点击“上一页”时将左边的scroll-top与右边的scroll-top分别减去2倍的260。翻页也处理好了，这是第二步。

        翻页时的scrollTop字段表示已经到顶部了，用来控制“上一页”的显示与否。scrollBottom字段表示已经到底部了，用来控制“下一页”的显示与否。leftScrollBottom字段表示左边的scroll-view已经到底部，这时需要将右边的scroll-view隐藏掉，不然两边会显示同样的内容。

        下面是三个触底和触顶事件的监听，这个很简单，看一下就会了。

        比较难理解的是两个滚动监听，这边涉及到一个问题，就是好比说整个文章的加载出来的真实高度是1000，我们每次向上滑动300，滑到第3次后scroll-top是900，但整个文章就只有1000，实际上最终的scroll-top是700，所以scroll-view会默认把最后一次scroll-top改到700的位置。

        这个问题怎么解决呢？我个人的思路有两种办法，一种是维护每次滑动的值，如果滑到最后一次就把滑动的值修改为刚好一页可以加载完。第二种是维护scroll-view的高度，将最后最后一次滑动的高度设置成刚好可以加载完。这边我选择的是第二种方法，维护scroll-view的高度。所以需要在提前一页就将最后一页的高度scrollHeight变量计算出来，然后在最后一次滑动时将scroll-view的高度设置好。左右两个scroll-view都要做同样的处理。

        这边还有一个问题就是点击下一页时不能在同一时间更新scroll-view的高度和scroll-top属性，可以先更新高度，然后加一个定时器延迟更新scroll-top。这是第三步。

        最后还有一个问题就是禁用用户的手指滑动事件，让他们只能用“上一页”“下一页”按钮来操作。这个我没有在scroll-view的属性里找到合适的方法，于是投机取巧加了一个透明遮罩把两个scroll-view盖起来，阻断了点击，简简单单一个view即可。

        微信小程序版本就完成了，适配其他版本，安卓版与H5版跟微信小程序只有一点不同，就是如果在scroll-view里面直接加载html，那就不能滑动了，很简单里面再包一个view来加载就行了。

就让往事随风都随风
关注
uni-app实现fullPage.js的整页翻页的效果
lkisgeek的博客
08-14 2088
使用scroll-view组件的scroll-into-view实现。监听用户触摸状态判断上下。同理也可设计左右slide模式。 <template> <view class="page"> <scroll-view scroll-y="true" :scroll-into-view="toView" class="scroll-view" :scroll-with-animation="true"> <view id="page1" @touchm
uniapp 实现左右滑动切换页面
m0_66809960的博客
07-19 1592
方案一切换的是组件页面，适用于各种场景，但比较繁琐，不够简洁，不想看的小伙伴可直接看方案二！另外还可以通过scroll-view实现触底加载，以及下拉刷新。方案二vue2.0完整代码。
uniapp 左右滚动
最新发布
qq_33240556的博客
08-05 918
这些工具各有优势，选择时可以根据个人的需求和偏好来决定。例如，如果你更倾向于一个图形化的界面，那么Remmina或SecureCRT可能是更好的选择。而如果你需要一个轻量级的工具，PuTTY则是一个不错的选择。对于跨平台支持的需求，WindTerm或FinalShell可能更加合适。对于Linux运维工作而言，远程连接工具是非常重要的。希望这些信息对你有帮助！如果你需要了解某一款工具的具体使用方法或者有其他问题，请随时告诉我。
uniapp使用scroll-view实现左右，上下滑动
热门推荐
zxh7770的博客
07-21 1万+
uniapp使用scroll-view实现左右，上下滑动 阐述 我们在项目中往往都能遇到实现左右滑动跟上下滑动的需求，不需要安装better-scroll uniapp 自带的scroll-view 就可以实现了。 实现左右滑动 <view class="model_scrollx flex_row"> <scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'"> <view
uni-app——uniapp 中 scroll-view 上下滑动卡顿
qq_43201350的博客
04-05 1189
uni-app——uniapp 中 scroll-view 上下滑动卡顿
uniapp---app滑动翻页（上滑、下滑、左滑、右滑）
maidu_xbd的博客
11-29 8949
（1）为页面绑定【touchstart】【touchend】事件 <template> <view class="home" @touchstart="start" @touchend="end"> //....... </view> </template> （2）js部分 <script> export default { data() { return { startData: { cli
uniapp小程序使用scroll-view组件实现上下左右滚动触发事件
05-15 1221
就因为这个配置，就会导致你的滚动事件不会触发，所以一定要配置相应的宽度和高度！最后实现的效果就是不论左右还是上下都可以触发滚动事件。
uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪
05-19
"uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪"这个主题关注的是如何在移动应用中实现平滑的下拉加载功能，同时避免页面在加载新内容时出现闪烁现象，确保用户在查看聊天历史时能有流畅的交互体验。...
uni-app自定义组件之菜单左右滑动并点击切换选中居中显示.zip
09-30
在本文中，我们将深入探讨如何使用uni-app框架创建一个自定义组件，该组件实现菜单的左右滑动，并在点击时使被选中的项居中显示。uni-app是一个基于Vue.js的多端开发框架，它允许开发者用一套代码编写应用，然后在...
uni-app列表项实现左划操作功能
02-25
在uni-app中实现左滑操作，我们主要会用到`<SwipeAction>`组件，这是一个用于创建滑动操作的组件，非常适用于列表项。 首先，我们需要在uni-app项目中引入`<SwipeAction>`组件。在页面的`.vue`文件中，添加以下代码...
基于uni-app开发的新闻和资讯类App模板
02-22
【基于uni-app开发的新闻和资讯类App模板】 在移动互联网时代，新闻和资讯类App已经成为用户获取信息的重要渠道。为了快速开发此类应用，开发者通常会寻找高效的开发框架和模板来提升效率。其中，“基于uni-app开发...
uni-app scroll-view触底刷新，实现翻页效果，提高数据展示效率
授人以渔的博客
07-20 3235
:style--方便自定义高度，scroll-Y代表纵向滚动，@scrolltolower代表触底触发的方法 <scroll-view :style="{'height':height+'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="onReachScollBottom"> 滚动的内容 </scroll-view> onReachScollBottom() { ...
UNI-APP中，swiper和tabbar结合实现滑动翻页效果
沧海龙腾LV的博客
02-23 2023
<template> <view> <!--导航栏--> <cu-custom bgColor="bg-blue" :isBack="true"> <block slot="content">设备组详情</block> <block slot="right"> <text class="margin-right text-df">编辑</text> </bl.
一篇教你 uniapp 往下滑动 实现分页
weixin_45870300的博客
12-19 6663
例如：。 总结 自身拥有越丰富，他在别人身上所能发现得到的就越少，加油各位，原神启动！！！！
uniapp -- 滑动页面切换(兼容微信小程序)
m0_72951245的博客
08-04 4327
（先声明哦我可不是偷懒，只是想学术借鉴一下）因为最近有在做左右滑动功能，秉持着能 ctrl+c 绝不动脑子的原则，开始了我的一顿操作，结果很明显没找到，言归正传，上代码。
uni-app scroll-view触底刷新，实现翻页效果
peijiajing的博客
06-18 2075
//:style--方便自定义高度，scroll-Y代表纵向滚动，@scrolltolower代表触底触发的方法 <scroll-view :style="{'height':height+'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="onReachScollBottom"> 滚动的内容 </scroll-view> onReachScollBottom() { .
uniapp实现快手视频上下滑动的平滑滚动
m0_63262511的博客
06-30 1200
【代码】uniapp实现快手视频上下滑动的平滑滚动。
uniapp在app端页面上下左右滑动问题，
Qin_jiangshan的博客
08-01 499
在page.json文件的"globalStyle"配置项中添加配置。
uni-app的scroll-view横向滚动导航,视频scroll-view纵向滚动导航可以滑动点击时可以跳转到播放页代码
08-10
### 回答1： 抱歉，我不是一个可以运行代码的程序，无法提供具体的代码实现。不过我可以给您提供一些思路。 针对横向滚动导航的问题，可以考虑使用 uni-app 中的 swiper 组件。在 swiper 中，可以通过设置 direction 属性为 horizontal 来实现横向滚动。 针对点击跳转到播放页的问题，可以在 swiper-item 中包裹一个 button，通过 button 的 tap 事件来触发页面跳转。跳转的目标页面可以使用 uni-app 提供的 navigate 或者 redirectTo 方法来实现。 针对纵向滚动导航的问题，可以使用 scroll-view 组件来实现纵向滚动。scroll-view 中可以通过设置 scroll-y 属性为 true 来实现纵向滚动。在 scroll-view 中，可以设置一个子元素作为导航菜单，通过子元素中包含的 button 来触发页面跳转。具体实现可以参考 uni-app 官方文档中的示例。 ### 回答2： 在uni-app中，可以使用scroll-view组件实现横向滚动导航和视频的纵向滚动导航，并在点击时跳转到播放页。下面是一个示例代码： 横向滚动导航： ```html <scroll-view scroll-x class="nav"> <view v-for="(item, index) in navList" :key="index" class="nav-item" @tap="navigateToPage(item)"> {{ item }} </view> </scroll-view> ``` ```css .nav { white-space: nowrap; } .nav-item { display: inline-block; padding: 10rpx; font-size: 28rpx; } ``` ```javascript export default { data() { return { navList: ['首页', '视频', '音乐', '图片'] // 导航菜单列表 } }, methods: { navigateToPage(item) { // 根据点击的导航菜单跳转到对应的页面 if (item === '视频') { uni.navigateTo({ url: '/pages/video-page' }) } else if (item === '音乐') { uni.navigateTo({ url: '/pages/music-page' }) } else if (item === '图片') { uni.navigateTo({ url: '/pages/image-page' }) } else { uni.navigateTo({ url: '/pages/home-page' }) } } } } ``` 纵向滚动导航： ```html <scroll-view scroll-y class="nav"> <view v-for="(item, index) in navList" :key="index" class="nav-item" @tap="navigateToPlayPage(item)"> {{ item }} </view> </scroll-view> ``` ```css .nav-item { margin-bottom: 10rpx; padding: 10rpx; font-size: 28rpx; } ``` ```javascript export default { data() { return { navList: ['视频1', '视频2', '视频3', '视频4'] // 视频列表 } }, methods: { navigateToPlayPage(item) { // 点击视频后跳转到播放页 uni.navigateTo({ url: '/pages/play-page?id=' + item.id // 传递视频id }) } } } ``` 在播放页中，可以通过uni-app提供的页面传参方式获取传递过来的视频id，并使用该id播放对应的视频。 以上就是一个基本的uni-app中scroll-view横向滚动导航和视频scroll-view纵向滚动导航点击跳转到播放页的示例代码。具体实现还需根据项目实际情况进行调整。 ### 回答3： 在uni-app中，如果要实现横向滚动导航，可以使用scroll-view组件。首先需要在页面上创建一个scroll-view组件，并设置它的scroll-x属性为true以启用横向滚动。然后在scroll-view组件内部定义一个导航栏容器，在容器内部添加导航项。 首先，在页面的template中添加如下代码： <scroll-view class="nav" scroll-x="true"> <view class="item">导航1</view> <view class="item">导航2</view> <view class="item">导航3</view> <view class="item">导航4</view> </scroll-view> 然后，在页面的style中添加如下样式： <style> .nav { display: flex; } .item { width: 100px; line-height: 36px; text-align: center; border: 1px solid #ccc; margin-right: 10px; } </style> 这样就可以实现一个简单的横向滚动导航了。 对于视频scroll-view纵向滚动导航，可以在导航项点击事件中使用uni.navigateTo方法跳转到播放页。首先需要在导航项上添加一个点击事件绑定，然后在事件处理函数中使用uni.navigateTo方法进行跳转。 在页面中的导航项上添加点击事件： <scroll-view class="nav" scroll-y="true"> <view class="item" @click="goToPlayPage">导航1</view> <view class="item" @click="goToPlayPage">导航2</view> <view class="item" @click="goToPlayPage">导航3</view> <view class="item" @click="goToPlayPage">导航4</view> </scroll-view> 在页面的methods中定义goToPlayPage方法： methods: { goToPlayPage() { uni.navigateTo({ url: '/pages/playPage/playPage' }); } } 这样点击导航项时就会跳转到播放页了。需要注意的是，播放页的路径需要根据实际情况进行设置。 以上是使用uni-app实现scroll-view横向滚动导航和视频scroll-view纵向滚动导航并跳转到播放页的代码。希望能对你有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值