用到的选项都列出来了,还有一点需要大家特别注意的:
使用竖向滚动条时必须为组件设置一个固定高度就是上面代码style里面设置的高!切记切记!
更多资料请阅读微信小程序scroll-view组件文档
wxss样式
同样在alljoke目录下面新建allJoke.wxss文件,小程序的样式和传统css差不多大家可以根据自己喜好自行设计,这里我简单做了一下样式比较丑大家将就着用吧.(题外话:受不了的自己动手丰衣足食)
小程序文档中关于样式的介绍
逻辑部分
来到最后也是最重要的逻辑部分了!老规矩alljoke目录下新建allJoke.js文件,先贴代码再慢慢讲解:
600){
this.setData({
scrollTop: 1,hidden: false
})
}else{
this.setData({
scrollTop: 1,hidden: true
});
}
},goTop: function(){
this.setData({
scrollTop:0,hidden: true
})
}
})
大家可以看到首先我们需要用page()函数注册页面,然后在data里面定义一些初始化数据.onLoad是这个页面的生命周期函数,页面加载时会调用到它.我们在页面加载时调用了自定义的getList函数.这个函数接收两个参数,第一个参数是要加载的页面,第二个参数是布尔值,用来判断是下拉刷新调用的这个函数,还是页面加载时调用的这个函数!接下来onPullDownRefresh是小程序提供的下拉刷新函数,里面wx.showToast显示消息提示框,用来提示用户正在加载,loadMore是滚动到底部触发的事件.函数里面会检查是否已经加载了全部列表项,如果已经加载了全部列表项会return掉,如果数据库还有列表项,上拉到底部加载下一页!scrll函数是滚动时触发的函数,可以看到这个函数会判断滚动条位置是否大于六百,如果大于六百显示点击直达底部的按钮,如果小于六百隐藏直达顶部的按钮.同时会更新滚动条位置的参数.刚刚在讲wxml时已经讲过scroll-view组件设置竖向滚动条位置scroll-top设置项时如果参数一样,页面不会重新渲染,我们就是利用了这一点,如果要到达顶部,位置必定是'0',滚动时触发scrll函数,我们把位置信息设置为'1',因为滚动函数会反复触发,所以此时页面是不会渲染的.也就是说由于位置设置参数都是设置为'1'不变,导致scroll-top设置项不会生效为goTop函数的直达顶部(把参数变为'0'提供机会).最后就是直达顶部按钮的函数了,可以看到它是把位置信息变为'0',参数变化scroll-top设置生效,页面直达顶部.最后再通过改变hidden这个参数把自己(直达顶部按钮)给隐藏掉了!
结尾
ok,通过上面的步骤我们终于实现了下拉刷新上拉加载的列表页功能了,从上面我们可以看到微信提供的接口和api还是挺全面的,要实现一个功能总体来说要比原生js实现要简单一些!
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
相关推荐
概述 消息能力是小程序能力中的重要组成，我们为开发者提供了订阅消息能力，以便实现服务的闭环和更优的体验。 订阅消息推送位置：服务通知 订阅消息下发条件：用户自主订阅 订阅消息卡片跳转能力：点击查看详情可提爱转至该小程序的页面 消息类型 一次性订阅消息 一次性订阅消息用于解决用户使用小程序后，后续服务
判断H5页面环境在微信中还是小程序中 用小程序提供的wx.miniProgram.getEnv可以获取环境参数 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.
wx.reLaunch和wx.navigateTo，wx.navigateTo的区别 2019-03-23 11:18:05 wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.n
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法总结 小程序里常见的取值有以下几种，一个完整的项目写下来，用到的概率几乎是100%。 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是：data-index="{{index}}"
H5项目接入微信授权登录，通过 UA 区分微信还是普通浏览器： let ua = navigator.userAgent.toLowerCase(); let isWeixin = ua.indexOf('micromessenge
微信小程序获取data-xx=""属性的值，自定义属性设置和获取（data-） 微信小程序<view class="details-btn" data-taskId="111" bindtap='taskdetails'
小程序报错：TypeError: Cannot read property ‘addEventListener‘ of undefined 解决办法 将调试基础库由2.16.0（或者当前的） -> 2.14.1 解决问题
H5跳转微信小程序-成功案例（VUE）（踩坑无数） TuoMei 已于 2022-07-29 09:52:22 修改 准备工作 根据官方提供的资料需准备以下几点： 1、已认证的服务号 2、绑定JS接口安全域名 （在微信公众平台设置） 3、IP白名单 （在微信公众平台设置） 4、将小程序和H5公众号进
微信小程序 页面跳转和数据传递实例详解 这篇文章主要介绍了微信小程序 页面跳转和数据传递实例详解的相关资料,这里附有实例代码帮助到家学习理解，需要的朋友可以参考下 微信小程序 页面跳转和数据传递 1.先导 在Android中，我们Activity和Fragment都有栈的概念在里面，微信小程序页面也
情景1.拉取公司代码演示： 因为github有墙，这里我们以gitee(码云)为例作为演示 (其实就是国产github，也非常好用~) 步骤一：打开Git界面 先在一个空文件夹右击Git Bash Here，打开git界面 步骤二：输入克隆远程仓库指令 别人复制的链接在这里获取 拿到别人赋值的链接自
如何开发微信小程序？ 作为一名10多年一直从事互联网平台开发的从业者，我来回答下这个问题吧。 微信小程序开发流程总体可以归纳为4个步骤， 老张带您捋一捋整个环节，小白用户可以收藏了。 好了废话不多说，开始！ 一、开发前小程序需要准备的资料 我们在开发微信小程序前，需要准备下相关资料。这个资料主要是后
原生小程序开发优化方案 为了更好的制定优化方案，我们 有必要先了解下小程序的底层架构、以及与普通网页开发的差异 小程序最终渲染载体与当下一些热门的技术 Flutter、React Native等不同，依然是浏览器内核，而不是原生客户端。 而对于传统的网页来说，UI 渲染和 JS 脚本是在同一个线程中
1，不要下两倍尺寸的图片， 小程序本身自己就会对元素缩小两倍，设计图片的一杯就已经很清晰了。 2，图片压缩，（主要是压缩静态资源，ps 可以压缩，然后有一些在线压缩工具，保持600-800kb 的静态） 3，通用的代码组件化 4，是在工程量太大可以分包，分包现在最大支持20m（一般都不会去分包的）
文章浏览阅读189次。人工智能研究实验室OpenAI在2022年11月30日发布了自然语言生成模型ChatGPT，上线两个月就已经超过一亿用户，成为了人工智能界当之无愧的超级大网红。ChatGPT凭借着自身强大的拟人化及时应答能力迅速破圈，引起了各行各业的热烈讨论。简单来说ChatGPT就是可以基于用户文本输入自动生成回答的人工智能聊天机器人。那肯定会有人说这不就是Siri嘛，虽然都是交互机器人但是两者的差别可老大了。那么ChatGPT在人机交互时为什么会有这么出色的表现？它到底会不会取代搜索引擎？90%的人真的会因为ChatG
文章浏览阅读193次。8. 导航和路由管理：掌握小程序的导航方式，如使用wx.navigateTo跳转页面、使用wx.redirect重定向页面等，学会实现页面之间的跳转和传参。1. 小程序的基本概念和架构：了解小程序的定义、特点以及与传统APP的区别，掌握小程序的运行环境、组件和API等基本概念。10. 支付功能：学习小程序的支付方式，如微信支付、支付宝支付等，了解支付流程和注意事项，学会实现小程序的支付功能。9. 用户授权和登录：了解小程序的用户授权机制，如获取用户信息、调用微信API等，学会实现用户的登录和注册功能。_微信小程序开发知识点总结
文章浏览阅读4.8k次，点赞7次，收藏18次。一、准备工作1. 安装微信开发者工具，并登录微信小程序账号；2. 准备斗地主游戏的图片资源；3. 准备斗地主游戏的音效资源；二、创建小程序1. 打开微信开发者工具，点击“新建小程序”，输入小程序名称，选择小程序的项目目录，点击“创建”；2. 在小程序的项目目录中，新建文件夹“images”，将准备好的斗地主游戏的图片资源放入“images”文件夹中；3. 在小程序的项目目录中，新建文件夹“sounds”，将准备好的斗地主游戏的音效资源放入“sounds”文件夹中；三、编写代码1. 在小程_扑克牌微信小程序代码
文章浏览阅读3.9k次，点赞3次，收藏7次。一、准备工作：1. 安装微信开发者工具，创建小程序项目；2. 准备游戏角色图片；3. 准备游戏背景音乐；二、实现步骤：1. 创建游戏页面，添加游戏角色图片，添加游戏背景音乐；2. 创建游戏角色类，定义游戏角色属性，如角色名称、角色图片、角色能力等；3. 创建游戏类，定义游戏属性，如游戏人数、游戏角色、游戏规则等；4. 创建游戏控制类，定义游戏流程，如游戏开始、游戏结束、游戏角色分配等；5. 创建游戏界面，实现游戏流程，如游戏开始、游戏结束、游戏角色分配等；6. 创建游戏结果页面，显示游戏_微信小程序游戏代码
文章浏览阅读1.7k次。1. 创建小程序项目：使用微信开发者工具创建一个小程序项目，并在项目中添加一个页面，用于模拟聊天。 2. 定义数据结构：定义一个数据结构，用于存储聊天记录，包括发送者、接收者、消息内容等信息。 3. 实现聊天功能：实现聊天功能，包括发送消息、接收消息、显示消息等功能。 4. 实现界面：使用微信小程序的界面框架，实现聊天界面，包括聊天记录列表、输入框等。代码示例：// 定义数据结构var chatData = { sender: '', receiver: '', message: '' };_制作聊天对话小程序代码
文章浏览阅读2.1k次。1、创建小程序项目：使用微信开发者工具，新建一个小程序项目，输入项目名称，选择项目目录，点击“创建”按钮，即可创建小程序项目。2、添加页面：在小程序项目中，可以添加多个页面，每个页面都有自己的页面文件，比如首页、分类页、购物车页、我的页面等。3、添加组件：在小程序项目中，可以添加多个组件，比如商品列表组件、购物车组件、订单组件等，用于在页面中显示商品信息、购物车信息、订单信息等。4、添加接口：在小程序项目中，可以添加多个接口，用于获取商品信息、购物车信息、订单信息等，以便在页面中显示。5、_微信开发者工具做一个我的商城
