https://www.cnblogs.com/miu-key/p/7606024.html

众所周知,可以滑动的 scroll 组件在移动端非常的重要,几乎每个页面都要用到. 而小程序的 scroll-view 组件就比较坑了,非得指定一个高度才能正常使用.布局复杂的时候谁还给你算高度啊... 坑归坑,没办法,还是得用--既然官方要求必须传高度,那就想办法计算吧. 一.布局分析,推导公式 先给个示例图: 这是一个稍微复杂点的页面,最上面是两个 tab 标签,每个标签的页面是一个子组件.第二个子组件布局是上面一个标题,下面是 scroll-view . 再画个解剖图吧-- 页面分三部分,

小程序scroll-view组件使用时,子元素虽设置样式display:inline-flex;whit-space:nowrap

根据微信小程序 scroll-view 文档所述,scroll-view必须给定一个固定高度.那么如果我们想要让它自动填充剩余高度,该怎么办呢? 前言 在说出我的解决方案之前,先来看一下我的页面设计,以便于理解. 我将这个页面分成了三部分:最顶部的导航栏navbar,用于显示概要信息的header,以及本文的主角scroll-view.可见,scroll-view位于页面的最下方,如果我直接给它设定一个固定的高度,那么在不同尺寸的屏幕上,就可能会有高度过小而在下方留白,或者高度过大超出屏幕下边界

小程序scroll-view组件不能触发相应滚动事件 在制作加载更多时会发现不能触发相应事件,一般情况下首先要查看两个必要的属性scroll-view的高度是否设置,第二就是scroll-view的滚动方向是否设置,缺一都有可能导致不能触发相应事件. //wxml. 这里的高度可以用自适应高度 <scroll-view class='index-container' style="height:{{windowHeight}}" scroll-y bindscrolltolowe

小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现: 1.scroll-view 中的需要滑动的元素不可以用 float 浮动: 2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的: 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排: 4.包裹 scro

问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个view会疯狂抖动. 直接上图吧: 下面是简化后的代码: <view class="main"> <scroll-view scroll-y="{{true}}" bindscroll="handleScroll" style=&qu

在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js 最终显示效果如下; 注意: (1)不能在scroll-view中使用textarea,mao,canvas,video组件 (2)scroll-init-view的优先级高于scroll-top (3)onPullDownRefresh事件,无法在scroll-view中触发

最近使用微信小程序开发的时候,需要用scroll-view的bindscrolltolower事件,控制加载下一页的内容.但是发现在ios里,下拉滚动一次,事件触发两次,导致重复加载数据. 经过百度和亲身试验,可以采用用bool变量控制的方法解决这个问题: 1.在data中定义bool变量 //是否正在处理滚动事件,避免一次滚动多次触发 isScrolling:false 2.bindscrolltolower事件处理函数中,进入时判断是否正在处理,并设置isScrolling值为true:退出

在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现锚点跳转主要以下几点: 1.最外层容器使用 scroll-view 2.赋值scroll-into-view,如:<scroll-view scroll-into-view="{{toView}}"> 3.设置 scroll-view 滚动方向 scroll-y="t

微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.datetime}}" wx:for

微信小程序提供了页面的上下滚动的事件,在页面的js文件中, page({ onPageScroll(e) { console.log(e.scrollTop) } }) 但是不是滑动事件,滑动事件需要自己加在view上, <view bindtouchstart='touchStart' bindtouchend="touchEnd"></view> 如果不让滑动事件冒泡的话.将bind改为catch就好了 <view catchtouchstart='t

使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height.以下列举一个示例: scroll-top的优先级要高于scroll-into-view的优先级 <!--pages/scroll_view/scroll_view.wxml--> <scroll-view scroll-y='true' scroll-top='50' upper-threshold='50' style='height:200px;' bindscrollto

我们经常在软件客户端上看到这么一个功能,当我们阅读信息浏览到文章的末尾时,通常会加载出更多的信息.比如,我们在简书客户端上浏览推荐文章时,浏览到屏幕的末尾,此时又加载出了另一页的推荐文章,即实现了上拉加载更多的功能.在小程序中,我们可以借助 scroll-view 来实现这个功能,当然也可以使用别的方法来实现. 需求: 当我们浏览到屏幕末尾时,加载出下一页的内容. 注意实现细节: 1. 由于采用的是 scroll-view 来实现,因此需要竖向滚动,那么 scroll-y 属性的值就必须要设置成

scroll-view 中的需要滑动的元素不可以用 float 浮动:

竖向滑动: <scroll-view scroll-y="true" style="height: 200rpx;"> <view style="background: red; width: 200px; height: 100px; display: inline-block" ></view> <view style="background: green; width: 200px; he

在项目开发中遇到一个关于scroll-view的的问题,具体如下: 项目要求是横向滚动,由于直接在scroll-view组件设置display:flex不生效,因此考虑直接在scroll-view下增加一个wrap,将所有的item放在wrap内, 将wrap设置为display:flex,这种方式在安卓手机不会导致任何问题,在苹果手机样式也不会有什么问题,但是当item的个数较多导致超出一屏,scroll-view 滑动触底或者触顶就会导致页面抖动.解决方案如下: sroll-view组件直接

在最近的项目有做到关于小说阅读的进度条功能,其中用到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)属性高(官方

一般在列表展示页面,会使用到上拉加载和下拉刷新功能,在scroll-view中有bindscrolltolower事件,可以实现上拉加载功能,但是却没法实现下拉刷新. 如需同时使用两种功能,解决步骤如下(以list页面为例): 1. 将scroll-view 改成普通的view, 并且设置样式 // list.wxsspage { height: %; } .container { width: %; height: %; // 或者 height: 100vh; } // 其他样式略 2. 在