微信小程序开发之十 —— 点击事件

最新推荐文章于 2024-05-29 18:26:19 发布

@不胜寒

最新推荐文章于 2024-05-29 18:26:19 发布

阅读量7.4k

点赞数 3

分类专栏：微信小程序文章标签：小程序 javascript

本文链接：https://blog.csdn.net/weixin_45079619/article/details/107524581

版权

快来学习微信小程序开发呀 —— 点击事件

摘要由CSDN通过智能技术生成

文章目录

学习前后

上一篇：微信小程序开发之九 —— JavaScript入门
下一篇：微信小程序开发之十一 —— 页面渲染

页面滚动

官方文档：wx.pageScrollTo(Object object)

属性	类型	默认值	说明
scrollTop	number	/	滚动到页面的目标位置，单位px
duration	number	300	滚动动画的时长,单位ms
selector	string	/	选择器
success	function	/	接口调用成功的回调函数
fail	function	/	接口调用失败的回调函数
complete	function	/	接口调用结束的回调函数（调用成功、失败都会执行）

selector 语法
selector类似于 CSS 的选择器，但仅支持下列语法。

 - ID选择器：#the-id
 - class选择器（可以连续指定多个）：.a-class.another-class
 - 子元素选择器：.the-parent > .the-child
 - 后代选择器：.the-ancestor .the-descendant
 - 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
 - 多选择器的并集：#a-node, .some-other-nodes

之前的页面写得太多内容了，建议重新建一个页面来编写，在app.json的pages数组前面添加路径就可以了，记住，小程序首次加载的页面是pages数组的第一个页面的值。

我们在新建页面的.wxml文件输入以下代码：

<button type="primary" bindtap="scrollToPosition">滚动到页面指定位置</button>
<view class="pagetop" style="background-color:#333;width:100%;height:400px"></view>
<button type="primary" bindtap="scrollToTop">滚动到页面顶部（返回顶部）<