关于小程序 scroll

在最近的项目有做到关于小说阅读的进度条功能，其中用到scroll-view和slider组件，发现scroll-view中的scroll-top在设置值后无效，出现这种情况大概是以下几种问题：

1.scroll-view的高度需要设置固定的值，比如全屏可以设置：height:100vh;

2.不可以同时设置scroll-into-view和scroll-top（scroll-left）属性，因为scroll-into-view的优先级别比scroll-top（scroll-left）属性高（官方文档提及过）;

3.scroll-top（scroll-left）属性不可以带单位，直接设置值就可以了，如：scroll-top="50";

以下是小说图书阅读进度条案例代码，思路为：scroll-view作为文章滚动区域，slider为显示进度的滑动条，之间通过百分比的数“连接”，具体代码往下：

1 <view>
2    <scroll-view scroll-y style="height:100vh" bindscroll="articelScroll" scroll-with-animation="true" scroll-top="{{textScroll}}">
3      <text>起初，对于追风筝的人这样的命题是难以理借解，至于其中所蕴含的深意， 纵使读罢全书亦不知所言。姑且不论所谓书名的深度和广度，就其故事本身而言，便给了我巨大的震撼。书中开篇所言，便是一种对曾经的畏惧和被永生锁在梦魇中的悲伤。为你千千万万遍， 第一次这句话的出现，便让我震撼莫名。我不知道这句话何时说出口，至于当时的气氛和情态也一无所知，但就这句话的内容，为，你，千，千，万，万，遍。其中所包含的无悔与执着，纵使天荒地老也不改的初心。 顿时，我有些嫉妒书中的“我“，相比于往往独行客的我，那些无悔的宣言，是我从未听到过的传说。
4      </text>
5    </scroll-view>
6    <view>
7       <slider bindchange="slider1change" max="200" min="0" step="5" value="{{scrollValue}}"  activeColor="#333"/>
8    </view>
9 </view>

var app = getApp()
Page({data: {scrollHeight:0,scrollValue:0,textScroll:1},// slider滑动条滑动触发slider1change:function(e){var value=e.detail.value;                  //获取slider滑动的当前值var scrollHeight = this.data.scrollHeight; //获取scroll-view的scroll-height值value=value/295*100;                       //计算出slider滑动的百分比var textscroll = value/100 * scrollHeight; //计算出scroll-view对应的值this.setData({textScroll: textscroll})},//scroll-view滑动articelScroll:function(e){var win = e.detail.scrollHeight;           var scroll = e.detail.scrollTop;win = win - 670;                             //算出大概的实质滑动高度var ballLeft = parseInt((scroll / win)*100); //算出滑动的百分比var sliderVal = parseInt(ballLeft/100*293);  //算出slider对应的值this.setData({scrollValue: sliderVal,scrollHeight: win})}
})

关于小程序 scroll相关推荐

小程序scroll设置（滚动轴样式、真机测试不能滑动）
一.先说scroll真机测试不能滑动的问题 1.我做的项目是公司的一个小程序商城.产品是个妹子,UI+产品+运营,反正啥都会,尤其是提需求.要不是因为她比我重,我早就打她了.我本来已经做好了一个点击购 ...
微信小程序scroll事件/onPageScroll事件的延迟问题
需求在前端开发中,我们经常会遇到一个需求,在页面进行滚动操作的时候,当页面其中的某个元素滚动到某个位置,我们就让该元素停留在该位置.等到滚动小于某个值的时候,再让该元素继续随着页面滚动.这就是我们平 ...
微信小程序自定义弹出框组件，模拟wx.showModal
微信小程序开发交流qq群 173683895 效果图: 代码 wxml <view wx:if='{{showModal}}'><view class='mask_layer' ...
[微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 自定义组件我把它分为简单的三个步骤, 1.创建组件 --- 2.编写组件 --- 3.调用,使用 ...
小程序这件事撸起袖子加油干
写在前面的话: 初次接触小程序,便被它开发的简易与便捷所吸引.总按耐不住对未知的探索欲望,于是乎撸起袖子来干一个吧.附:小程序开发文档项目介绍艺龙酒店小程序实践使用<swiper>标 ...
react.js做小程序_如何使用React.js构建现代的聊天应用程序
react.js做小程序 In this tutorial, I will guide you to build your own group chat application using React ...
小程序一次性上传多个本地图片，上拉加载照片以及图片加载延迟解决之道
一:小程序之一次性上传多个本地相片最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片. 问题描述最近做项目的时候要实现一个上 ...
微信小程序点餐+SpringBoot（包括后台）
个人资源与分享网站:首页-小草资源分享网站需求背景: 微信小程序极大方便了广大用户的使用和方便,因为想开发一个微信小程序点餐系统,作为自己的毕业设计. 技术架构: 小程序端:原生微信小程序后端:S ...
mpvue开发小程序所遇问题及h5转化方案
项目结构 |---build|---pages.js文件目录|---src|---component子组件|---pages|---业务页面|---store,vuex储存|---utils|---请 ...

关于小程序 scroll

关于小程序 scroll相关推荐

最新文章

热门文章