微信小程序scroll-view的使用
这边博客主要是对微信小程序文档的的使用心得
官网地址
demo效果
一些属性
scroll-top 和属性,设置竖向滚动条的位置,就是第一次进来的时候,还没有滑动的时候view的位置
假如不设置默认在第一位置,如果想显示中间的或者其他的位置,就可以使用此属性
scroll-into-view 这个就是可以滚动到指定item的地方
其他的属性就不用说了,这2个是自己看文档第一次不清楚的地方,
demo参考
<!--垂直滚动，这里必须设置高度-->
<text bindtap='click'>垂直方向</text>
<scroll-view scroll-y="true" style="height: 300px" scroll-top="30px"
bindscrolltoupper="upper"
bindscrolltolower="lower"
scroll-into-view="{{toView}}"
scroll-top="{{scrollTop}}"
bindscroll="scroll">
<view id='test' class="item"></view>
<view id='test1' class="item1"></view>
<view id='test2' class="item2"></view>
<view id='test3' class="item3"></view>
<view id='test4' class="item4"></view>
<view id='test5' class="item5"></view>
</scroll-view>
<!--水平滚动-->
<text>水平方向</text>
<scroll-view scroll-x="true" style=" white-space: nowrap">
<image src='https://github.com/leon5458/my_use_image/blob/master/my_use_image/a2.jpg?raw=true' class='img1'></image>
<image src='https://github.com/leon5458/my_use_image/blob/master/my_use_image/a1.jpg?raw=true' class='img1'></image>
<image src='https://github.com/leon5458/my_use_image/blob/master/my_use_image/a3.jpg?raw=true' class='img1'></image>
<image src='https://github.com/leon5458/my_use_image/blob/master/my_use_image/1.jpg?raw=true' class='img1'></image>
</scroll-view>
注意垂直方向的时候高度记得写一个固定值,不然一些属性无法是会用,,,
注意
Bug & Tip
tip: 请勿在scroll-view中使用textarea、map、canvas、video组件tip:scroll-into-view的优先级高于scroll-toptip: 在滚动scroll-view时会阻止页面回弹，所以在scroll-view中滚动，是无法触发onPullDownRefreshtip: 若要使用下拉刷新，请使用页面的滚动，而不是scroll-view，这样也能通过点击顶部状态栏回到页面顶部
给出的demo吧 虽然麻烦了点
demo地址如果帮助了您,希望给一个star
微信小程序scroll-view的使用相关推荐
- 微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏 需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...
- 微信小程序中view水平垂直居中
微信小程序布局中view有时候需要在水平方向和垂直方向上都居中,发现flex布局可以实现,例如view1(图中灰色方块)需要实现居中,可以用如下设置实现: wxss文件中的设置如下: .main {w ...
- 微信小程序把view居中_初识微信小程序
"晓程序" 小程序连载笔记,通俗易懂,欢迎各位转发关注学习.未经作者授权,禁止转载 初识小程序 什么是微信小程序 微信小程序,小程序的一种,英文名Wechat Mini Progr ...
- 微信小程序解决view点击事件穿透地图map触发markertap
微信小程序中使用map组件,ios手机中点击地图上的view,会触发底下的markertap,只要底下如果有marker点的话. 这就造成了用户体验不是很好. 然后无意间我发现点击能滑动的scroll ...
- 微信小程序scroll事件/onPageScroll事件的延迟问题
需求 在前端开发中,我们经常会遇到一个需求,在页面进行滚动操作的时候,当页面其中的某个元素滚动到某个位置,我们就让该元素停留在该位置.等到滚动小于某个值的时候,再让该元素继续随着页面滚动.这就是我们平 ...
- 微信小程序－view的创建和使用
今天写第一篇关于微信小程序的学习,view的创建和使用. 微信小程序开发需要学习基本的标签,这对我来说是一个挑战,不过加油啊. 1.创建一个View 在wxml中 <view class=& ...
- 微信小程序中view和html中div,WXML:微信小程序版HTML
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 3.7.1 标签与属性 常用基础标签text view 特征: tex ...
- 【微信小程序】view之点击变色效果
<view class='view-box-btn' bindtap="onSave">保存</view> 这样的一个按钮,在wxss中设置它的样式 .vi ...
- 微信小程序支持view触发转发分享功能
# 情境 今天做项目,特定场景下,我必须要用view标签元素,触发转发分享功能 但是,阅读小程序官方文档后,只有两种情况会触发转发操作 1. 点击小程序右上角的转发按钮 2. button标签添加op ...
- 控制微信小程序web view的返回按钮
需求:点击web-view页面的左上角返回按钮时,显示弹窗,点击取消或确认后才能返回.(实际上点击返回按钮会直接返回上一页) 解决方法:由于webview使用的是微信浏览器打开的,我们可以使用js的H ...
最新文章
- 做人留一线，日后好相见
- 动态内存分配---数组
- 秘钥对使用_使用gitactions持续集成项目实例
- IDEA如何生成get和set方法
- 计算机专业考研数据结构比较,计算机专业考研科目：数据结构重点汇总
- 服务器日志记录_5种改善服务器日志记录的技术
- 2020必火的图神经网络（GNN）是什么？有什么用？
- 如何在后台配置中找到某个具体配置的事务码
- python调用摄像头人脸识别代码_OpenCV3-Python人脸识别方法—人脸识别与标记
- mongodb-查询
- ASP.NET的TreeView和Menu控件分别绑定siteMap和xml文件并应用母版
- 《电路分析导论（原书第12版）》一3.14 压控电阻
- 手把手教你用Mysql-Cluster-7.5搭建数据库集群
- C#中new一个对象的过程说明
- CNN英文垃圾邮件分类（数据预处理）
- Leetcode力扣 MySQL数据库 1384 按年度列出销售总额
- 网站被攻击最全面的解决方法
- 《私募股权基金投资基础知识》---第五章
- iOS 9适配技巧（更新版）
- Adobe Acrobat XI 安装版和免安装版_PDF转换软件