微信小程序上拉、下拉、动态设置窗口背景色

一、enablePullDownRefresh

1、下拉刷新enablePullDownRefresh的支持

单页面配置json文件

{
  "enablePullDownRefresh": true
}

app.json配置(所有页面都带有下拉刷新功能)

{
    "window": {
        "enablePullDownRefresh": true
    }
}

2、设置backgroundTextStyle
大家会发现别人的小程序下拉刷新是有三个点闪烁的动画、自己设置的并没有。这里面有个设置backgroundTextStyle的支持:

    "backgroundTextStyle": "",支持 dark/light

3、停止stopPullDownRefresh

微信小程序还提供了停止下拉刷新的API:
https://developers.weixin.qq.com/miniprogram/dev/api/wx.stopPullDownRefresh.html

 wx.stopPullDownRefresh()

二、onReachBottomDistance上拉触底

1、页面上拉触底事件触发时距页面底部距离,单位为px。
(单页面json配置,app.json的window配置中配置 全部页面的上拉触底)

 "onReachBottomDistance": 50//默认值是50

2、在Page.onReachBottom里面进行渲染数据及查看

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("页面上拉触底事件的处理函数")
  },

三、动态设置下拉背景字体、loading 图的样式

wx.setBackgroundTextStyle({
  textStyle: ‘dark‘ // 下拉背景字体、loading 图的样式为dark
})

四、动态设置窗口的背景色

wx.setBackgroundColor({
  backgroundColor: ‘#ffffff‘, // 窗口的背景色为白色
})
<!--兼容ios-->
wx.setBackgroundColor({
    backgroundColorTop: ‘#DC143C‘, // 顶部窗口的背景色为红
    backgroundColorBottom: ‘#00FA9A‘, // 底部窗口的背景色为绿
})

原文地址:https://blog.51cto.com/11806679/2398518

时间: 2024-11-07 12:59:57

微信小程序上拉、下拉、动态设置窗口背景色的相关文章

微信小程序页面事件-下拉刷新,上拉加载更多

1.下拉刷新的概念及应用场景. 概念: 下拉刷新是移动端更新列表数据的交互行为,用户通过手指在屏幕上子上而下的滑动,可以触发页面的下拉刷新,更新列表数据. 应用场景: 在移动端,数据列表是常见的页面效果,更新列表数据是最基本的页面需求,相比于按钮刷新,定时刷新来说,下拉刷新的用户体验方便友好,已经成为移动端刷新列表数据的最佳解决方案. 微信小程序启动下拉刷新: 两种方式: 1.需要在app.json 的window选项中或页面配置中开启enablePullDownRefresh, 但是,一般情况

超详细,用canvas在微信小程序上画时钟教程

最近开始学习canvas,看了慕课网的一个视频,开始自己动手在微信小程序上画个时钟, 首先我们可以先看以下微信小程序的官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/canvas/reference.html 和canvas的手册对比:http://www.w3school.com.cn/tags/html_ref_canvas.asp 我觉得其实除了删减一些内容之外没什么太大的区别 直接贴代码: wxml <!--index.wxml-->

微信小程序上传后发布或者体验版测试无数据

在做微信小程序开发的过程中,发现小程序在本地调用接口的数据都显示,但是上传之后,发现手机体验没有数据.以下为解决办法: 1.先清除缓存试试. 2.打开微信小程序工具右上角的详情——项目设置,将“不校验合法域名.web-view(业务域名).TLS 版本以及 HTTPS 证书”勾选上,然后上传,重新刷新微信小程序官方页面,重新打开二维码进行体验. 此文章为原创,转载时请标明原文章出处,谢谢大家! 原文地址:https://www.cnblogs.com/lynna/p/9199315.html

微信小程序上拉加载和下拉刷新(wepy)

这篇随笔主要是记录在用wepy写小程序下拉刷新和上拉加载功能时遇到的数据显示不完全的问题及解决方法. 网上很多关于小程序的上拉加载和下拉刷新的文章的实现方法,无非两种,一是用scroll-view组件,另一种则是使用onReachBottom()和onPullDownRefresh()两个页面事件处理函数. scroll-view实现不好的是不能使用onPullDownRefresh,只能检测滚动到顶部触发刷新或者其它动画操作,以及在其内部使用textarea.map.canvas.video等

微信小程序上拉加载下拉刷新

微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载的动画可能会是白色背景,会看不清. { "usingComponents": { "annicate": "/components/annicate/index" }, "navigationBarTitleText": &quo

微信小程序剖析【下】:运行机制

在上一篇<微信小程序「官方示例代码」浅析[上]>中,我们只是简单的罗列了一下代码,这一篇,让我们来玩点刺激的——就是看看IDE的代码,了解它是怎么运行的. 还好微信的开发团队在软件工程的实践还有待提高,我们才有机会可以深入了解他们的代码——真想建议他们看看Growth的第二部分,构建系统. 解压应用 首先你需要有下面的工具啦 Mac电脑 微信web开发者工具.app WebStorm / 其他编程器 或 IDE,最好可以支持重命名 首先,我们需要右键微信web开发者工具.app,然后显示包的内

干货|微信小程序线上线下推广的方法和销售话术小技巧分享

一款小程序在被开发后,若想获得广泛的用户群体,就得靠一些巧妙地话术宣传和推广措施.那么问题来了,微信小程序推广和话术有哪些呢?具体要怎么操作?别着急,请听小编来跟大家一一道来. 小程序推销话术小技巧 1.有自信,说话有底气 销售人员在宣传小程序时,一定在客户面前要很自信地说话.不自信的话是缺乏说服力量的.有了自信以后,销售人员在讲话的尾语可以作清楚的.强劲的结束,由此给对方确实的信息.如"一定可以使您满意的".这样的话会让客户对你宣传的小程序产生一定的信心. 2.重复重要语句,加深在顾

微信小程序(4)--二维码窗口

微信小程序二维码窗口: <view class="btn" bindtap="powerDrawer" data-statu="open">button</view> <!--mask--> <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if=&qu

微信小程序-ios系统-下拉上拉出现白色,如何处理呢?

这几天做小程序,有些页面都是全屏的背景,在安卓上背景是固定的,而在ios上上拉下拉出现白色,测试说体验不太好,一开始我以为是下拉上拉刷新造成的,关闭了依然是这样.为了体验好点,可以按一下解决: 方式一: 可以在page.json文件内配置 :"backgroundColor": "#ccc" 属性,这个方法比较便捷.但是对于一些全屏背景的页面体验还不是很好 方式二: 对于一些全屏背景页面,我们可以让背景固定这样体验会好点,可以按以下进行操作: 1>page.j