首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

微信小程序实践:2.3 可滚动的容器组件之 scroll-view

scroll-top指内部的滚动实体,高于顶部边缘多少距离。单位默认是px,也可以传入rpx。默认情况下scroll-top是0,实体向上滚动时,其值慢慢增加。 ?...我们只能在JS里动态改变scroll-top、scroll-left这两个属性绑定的变量,然后视图渲染,组件会自动发生滚动。...它是为了在更新,取消下拉更新状态的。组件处于「下拉更新」状态,它的值变为true,此时程序要去做一些耗时的事情,例如网络加载。待处理完成了,将这个值置为false,下拉更新的状态就恢复回去了。...内容太少,根本无法触发scroll事件,还怎么触发下拉更新呢? ? 在新的基础库版本中虽然解决了这个问题,但是内容少的时候,却是连页面内容也滑动了。...通过wx.startPullDownRefresh触发下拉刷新,此时页面将拉于「更新中」的状态。处理完异步加载,使用wx.stopPullDownRefresh停止更新状态。

13.9K30

关于H5在移动端弹出下拉选项时遮挡输入框的问题

背景 在最近的一个Hybrid App项目中,我实现的H5有以下两个需求: 使用quill.js实现富文本编辑器,但是,工具栏需要固定定位到底部,输入法弹出时,工具栏需要悬浮在输入法键盘之上,如下图所示...: 就是一个正常的表单,除了有文本输入,还有下拉选项,当下拉选项弹出时不能遮挡住聚焦的输入框,如下图所示,点击左图的Complex Labels时,弹出下拉选项,下拉选项遮挡住了Complex Labels...,产品要求的效果是:当下拉选项弹出时不能遮挡住当前聚焦的表单项,也就是Complex labels quill.js工具栏定位问题 工具栏使用的是fixed定位,css如下所示: #ql-toolbar...H5的页面只需要在我们的app端内使用,不需要兼容其他app时是可行的,如果需要兼容其他app则还是不可行,因为其他app并不会通过事件告知我们键盘的高度 总的来说这个问题并没有特别好的处理方式,或多或少都会存在一定问题...,最终,我们确定的方案是由端来实现富文本编辑器,H5来实现编辑的预览页面 下拉选项遮挡输入框的问题 对于文本输入框之所以不会遮挡,是因为文本输入框进行输入时,弹出的是系统级的输入法键盘,所以不会遮挡。

5.3K30

滚动穿透的6种解决方案【已自测】

在移动端中,如果我们使用了一个固定定位的遮罩层,且其下方的dom结构的宽度|高度超出屏幕的宽度|高度,那么即使遮罩层弹出铺满了整个屏幕,其下方的dom结构依然可以滚动,这就是大家所说的“滚动穿透”。...ps:我偷懒直接js控制了行间样式,但标准写法应该是给body添加类名来控制 局限问题: body滚动再触发弹层,会使body页面回滚到顶部。...关键代码: JS控制弹窗的交互、body的禁止滚动 ? css添加弹层的超出滚动效果 ? 局限问题: 弹层中内容滚动到顶部或底部,还会连带页面body一起滚动。也就是还会发生穿透效果。...真正的问题是当我们滑动弹窗可滚动区域,把可滚动区域的内容上滑到底部或下拉到顶部,再触发弹窗可滚动区域准备滑动,此时的背景页面就会跟随滚动。真是恐怖。...4、如果手势是向上滑,且页面现在滚动的位置刚好是整个可滚动高度——弹窗内容可视区域高度的值,说明上滑到底,阻止默认事件。

13.4K31

Python爬虫神器pyppeteer,对 js 加密降维打击

还可以加载一个 js 文件: await page.addScriptTag(path=path_to_your_js_file) 通过注入 js 脚本能完成很多很多有用的操作,比如自动下拉页面等。...拼多多搜索爬虫 页面自动下拉 拼多多的搜索界面是一个无限下拉页面,我们希望能够实现无限下拉页面,并且能够控制程序提前退出,不然一直下拉也不好,我们可能并不需要那么多数据。...js 脚本 async () => { await new Promise((resolve, reject) => { // 允许下滑的最大高度,防止那种可以无限下拉页面无法结束...,以毫秒为单位 maxScrollHeight : 运行页面下拉最大高度 maxScrollTimes : 最多下拉多少次(推荐使用,可以更好控制爬取多少数据) maxTries : 下拉不成功时最多重试几次...} }) } """) await page.evaluate("你的那一段页面自动下拉

2.9K20

vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多

这里选择用JS中的Image类,通过预加载图片的方式提前获取图片宽高,另外通过一个临时变量来计算是否所有图片的高度已经得到。所有的图片高度获取,开始渲染页面。...页面渲染,获取所有图片所在的盒子,循环计算盒子的高度,开始设置每个盒子item的绝对定位。 页面渲染时,会出现闪烁的现象。如何解决这个问题呢?这里用了一个动画样式。...}) }, 2.2、预加载图片,存储图片高度   获取数据,遍历数据数组,预加载图片,计算图片缩放高度,存储起来。...同时由于图片加载是异步加载,所以用变量计数,最后一个图片加载完成,开始渲染页面。...,设置绝对定位   所有图片通过预加载获取图片高度,开始渲染页面

3K10

React-Native 版高仿淘宝、京东商城首页、商品分类页面

高仿淘宝、京东等商城首页、商品分类页面,正在做商城项目的同学有福啦,看看是你们想要的效果吗?...用到的技术 自定义 Badge(角标) 动画、动画插值器 Swiper 轮播图 自定义 tab 自定义 popup 弹窗下拉菜单 FlatList、SectionList 重点代码解析 MallHome.js...const marginRight = this.state.searchViewMargin.interpolate({ inputRange: [0, 80], // 滚动条滚动到...= (height - 65) / 2; // 如果当前 item 的高度 大于 屏幕一半的高度,就让滚动条滚动 indexHeight - halfHeight 高度(类似京东商品分类效果..., pageY) => { const topOffset = pageY + height // 计算"下拉菜单"距离页面顶部的偏移量 this.dropdownMenu.show

3K10

微信小程序基于最新版1.0开发者工具分享-小试牛刀(视频)+发布流程

清理结构 清理如下结构,只保留了两个 必备 文件,同时做如下修改: ├── app.js ├── app.json //app.js App({ onLaunch: function () {...想要 flex 页面生效,需要在 flex.js 中调用全局函数: // flex.js Page({ }) Page() 函数接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等...增加 list 页面 list 页面多少会比 flex 要复杂些。 刚进入到页面时候,显示没有数据的提示信息。...createData 函数的作用只是单纯的返回包含 3 个元素的数组,最后拼接的新数据,会通过 setData 更新数据 arrList,数据更新,视图会自动更新。...,由于页面高度不够时候,难以操作触发 onReachBottom,故我们给当前的页面外层标签 page 加一个 150% 高度: page{ height: 150%; } .item{ background-color

1.2K101

微信小程序|下拉菜单

问题描述 下拉菜单的运用: 下拉菜单在各类网页,app或者小程序中都是比较常见的输入控件。下拉菜单的下拉选项的多少可以根据自身需求进行调节,常运用于时间范围选择,地点区域选择,价格区间选择,等等。...提供下拉菜单的目的是帮助用户更快更准确的选择相关条件。下拉菜单的运用可以简化页面设计,节约空间,在一定程度上简化设计。...在index.wxml文件中,我们需要写好下拉菜单的基础框架,使用view创建下拉选择的菜单,这里创建三个菜单,需要注意的是要加上data-name属性,用于下面实现选择菜单显示在选择框里。...点击该组件时, 会触发相应的函数执行。...js方法: 在index.js页面,编写两个方法,一个是bindShowMsg ()方法,另一个是mySelect方法,用于实现当选择了下拉的菜单显示菜单内容。

5.5K140

javaWeb核心技术第三篇之JavaScript第一篇

: onload "页面加载完毕触发" - 事件和事件源的绑定 - 方式1:绑定事件 " 实现方式:通过标签的事件属性 例如:...将正在使用的定时器清除" - setTimeout() 单次执行定时器 - 格式1:setTimeout(函数名称,毫秒值); "单次执行,多少毫秒执行指定函数...,只执行一次" - 格式2:setTimeout("函数名称(参数列表)",毫秒值); "单次执行,多少毫秒执行指定函数,只执行一次 可传递参数".../校验通过 给对应的span标签中填写提示信息 } //e.返回值 return flag; } 案例2-表格各行换色 需求分析: 页面加载成功...获取头部复选框状态 对象.checked; b.获取其他的复选框对象 c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性 案例4-省市二级联动 需求分析: 省份的下拉选改变的时候

2.3K10
领券