温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-06-16 19:43:14 来源:网络 阅读:3060 作者:18710009726 栏目:开发技术

一、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', // 底部窗口的背景色为绿
})
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI