微信小程序 wxml组件开发(一) scroll-view

 

      微信小程序是一款基于微信平台生态具有特色的APP,集中wxml(html),wxss(css),js(javascript),json(json)于一体的前端开发工具,主要开发空间是前端组件和功能,后端数据库一般采用对外对接的方式进行传参。前端通过调用和传递参数进行动态交互数据,再通过JS进行一定的处理和分析后传递给前端进行展示。

      这次,我们来主要介绍微信小程序的可滚动视图区域功能组件——scroll-view

      首先,我们来看看scroll-view的基本参数:

属性名 类型 默认值 说明
scroll-x Boolean false 允许横向滚动
scroll-y Boolean false 允许纵向滚动
upper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件
lower-threshold Number 50 距底部/右边多远时(单位px),触发 scrolltolower 事件
scroll-top Number   设置竖向滚动条位置
scroll-left Number   设置横向滚动条位置
scroll-into-view String   值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡
enable-back-to-top Boolean false iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向
bindscrolltoupper EventHandle   滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower EventHandle   滚动到底部/右边,会触发 scrolltolower 事件
bindscroll EventHandle   滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

 

注:以上摘抄自https://www.w3cschool.cn/weixinapp/weixinapp-scroll-view.html的基本参数

scroll-view有很多种参数和功能,我们接下来主要介绍scroll-x和scroll-y两种功能,即是x轴和y轴转动的方式

纵向转动



   
   
   

横向转动


  
    
  

你可能感兴趣的:(微信小程序)