在最近的项目有做到关于小说阅读的进度条功能,其中用到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为显示进度的滑动条,之间通过百分比的数“连接”,具体代码往下:

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

  1. 微信小程序app.js中设置公有变量

    初始化GlobalData 在App.js的最上方可以设置GlobalData的初始值. App({ globalData:{ appid: '1wqas2342dasaqwe232342xxxxxx ...

  2. 微信小程序---app.json中设置背景色不生效解决办法

    按照官方文档的说明,backgroundColor应该可以设置窗口的背景色. "window":{ "backgroundTextStyle":"li ...

  3. UGUI 用手柄或者键盘控制选择Scroll View中的游戏对象时,滚动条跟着移动

    原预制体以及脚本的下载地址:https://download.csdn.net/download/qq_15017279/10404010 1.新建一个Scroll View,删掉横向的滚动条,并且把 ...

  4. 微信小程序的button按钮设置宽度无效

    亲,你是不是也遇到了微信小程序的button按钮设置宽度无效.让我来告诉你怎么弄 方法1. 样式中加入!important,即:width: 100% !important; wxss代码示例 1 2 ...

  5. 小程序 <web-view></web-view> 中使用 form 表单提交

    在最近的小程序项目中,使用到了 <web-view></web-view> 内嵌 H5 页面,在 H5 中需要使用 form 表单提交数据. H5 使用的技术框架是 vue+v ...

  6. java的小程序在html中的运行测试

    java的小程序在html中的运行测试,打开vs2012,以网站模式打开,生成,调用iis临时服务器运行.

  7. 微信小程序传递URL中含有特殊字符

    小程序传递URL中含有特殊字符"="时,解决办法:先encodeURIComponent,取到值以后再decodeURIComponent 首先在A页面 var urls = en ...

  8. 《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装

    WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...

  9. 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架

    Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...

随机推荐

  1. 关于cookies,sessionStorage和localStorage的区别

    如果我说得啰嗦了,请麻烦提醒我一下~~ 面试的时候说: 首先这三个可以在浏览器端按下F12,在Application可以查看到. 如下图: cookies: sessionStorage: sessi ...

  2. Qt学习之网络编程(二)

    UDP协议 UDP协议(用户数据报协议)是一种简单轻量级.不可靠.面向数据报.无连接的传输层协议.之后我们会介绍TCP协议,相对于UDP,TCP是一种可靠的.有连接的协议:既然这样我们就用TCP不就好 ...

  3. Asp.net Core 添加 EF 工具并执行初始迁移错误解决方法(Add-Migration Initial---Build failed.)

    1.问题: 首次在ASP.NET Core项目中使用Code First模式的Entity Framework框架,在添加EF工具并做初始化迁移(perform initial migration), ...

  4. 034 Search for a Range 搜索范围

    给定一个已经升序排序的整形数组,找出给定目标值的开始位置和结束位置.你的算法时间复杂度必须是 O(log n) 级别.如果在数组中找不到目标,返回 [-1, -1].例如:给出 [5, 7, 7, 8 ...

  5. 关于Function.prototype.apply.call的一些补充

    宿主对象,在javascript中有三类对象,本地对象,内置对象和宿主对象.其他两类暂且不提,宿主对象是指什么呢(DOM BOM),控制台对象是文档对象模型的扩展,也被认为是宿主对象.那么,它们有什么 ...

  6. (转)Linux系统基础网络配置老鸟精华篇

    Linux系统基础网络配置老鸟精华篇 原文:http://blog.51cto.com/oldboy/784625 对于linux高手看似简单的网络配置问题,也许要说出所以然来也并不轻松,因此仍然有太 ...

  7. Shell笔试题3

    1.查找当前目录中所有大于500M的文件,把这些文件名写到一个文本文件中,并统计其个数.find ./ -size +500M -type f | tee file_list | wc -l 2.在目 ...

  8. &&运算符和||运算符的优先级问题 专题

    public class SyntaxTest { @Test public void test() { System.out.println(true || true && fals ...

  9. webpack webpack-dev-server报错

    Error: getaddrinfo ENOTFOUND localhost at errnoException (dns.js:28:10) at GetAddrInfoReqWrap.onlook ...

  10. Cmder 简明使用说明

    简介 Cmder is a software package created out of pure frustration over the absence of nice console emul ...