微信小程序滑动调整数值

微信小程序滑动调整数值,第1张

在微信小程序中可以通过绑定事件来实现滑动调整数值的功能。可以使用“touchmove”事件,在滑动时不断获取到当前滑块的位置。通过计算相关信息,可以得到需要调整的数值,有助于实现上述功能。

本系列主要对小程序常用的组件做一个总结,方便自己及其它小程序开发者作为字典查阅和检索。

小程序组件有一些公共属性,在每个组件中代表的意义和数据类型都是一样的。

容器组件:内部能嵌套任何标签。常用的视图容器有: view , scroll-view , swiper

<view/> 是一个块级容器组件,任何一种复杂的布局都可以嵌套在 <view/> 组件内,并在 *.wxss 中设置相关样式。

<view/> 除了上述组件共有的属性外,还包含一组关于点击行为的属性。

在布局中,需要容器具有可滑动的功能,且能监听滚动、触顶、触底等事件,就需要 <scroll-view/> 组件, <scroll-view/> 在 <view/> 组件上添加滚动相关的属性,通过这些属性,可以响应滚动相关事件。

注意:

<textarea/>, <video/>, <map/>, <canvas/> 不能嵌套在 <scroll-view/>中使用

利用 swiper 组件,可以实现轮播图,滑动页面,预览图片等,一个完整的滑块视图软件由 <swiper/> 和 <swiper-item/> 两个标签组成,不能单独使用。一个 <swiper/> 只能嵌套一个或多个 <swiper-item/>标签,放置其它的标签会被删除,其中, <swiper-item/> 中能放置任何标签,高度默认为 100% ,另外没有任何其它特殊属性。

<swiper/> 的属性如下:

swiper

滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

swiper-item 仅可放置在swiper组件中,宽高自动设置为100%。

列表渲染

条件渲染

dataset

在组件节点中可以附加一些自定义数据。这样,在事件中可以获取这些自定义的节点数据,用于事件的逻辑处理。

在 WXML 中,这些自定义数据以 data- 开头,多个单词由连字符 - 连接。这种写法中,连字符写法会转换成驼峰写法,而大写字符会自动转成小写字符。如:

navigateTo

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

redirectTo

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。

没铺开直接赋值的打印结果:(打开注释)

不加...

铺开后赋值的打印结果:(打开注释)

onPullDownRefresh

onPullDownRefresh()方法,用于监听用户下拉刷新事件。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。

onReachBottom()方法,用于监听用户上拉触底事件。

微信小程序regexp对象(附带方法解析)

getRegExp(pattern[, flags]),参数:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12035731.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存