《微信小程序开发从入门到实战》学习六十五

6.4 交互API

6.4.5 页面滚动API

使用wx.pageScrollTo接口可使页面自动滚动到目标位置。该接口介绍Object参，该参支持属性如下所示：

scrollTop：必填，滚动到页面的目标位置，单位为px

duration：滚动动画的时长，单位为毫秒，默认值300

三回调函数

示例代码如下：

    // 在400毫秒时间内将页面滚动到最上面的内容

    wx.pageScrollTo({

      scrollTop: 0,

      duration: 400

    })

6.4.6 导航栏加载动画API

使用wx.showNavigationBarLoading接口可在当前页面的导航栏显示加载动画。

该接口传Object参，参属性含三回调函数。示例代码如下：    wx.showNavigationBarLoading()

使用wx.hideNavigationBarLoading接口可以隐藏导航栏的加载动画。

该接口传Object参，参属性含三回调函数。示例代码如下：    wx.hideNavigationBarLoading()

6.5 界面API

界面API可以动态改变小程序页面中的各种界面设置

6.5.1 导航栏API

使用wx.setNavigationBarTitle接口可动态改变当前页面导航栏的标题。

该接口传Object参，参属性含三回调函数，以及title属性。

示例代码如下：    

wx.setNavigationBarTitle({

      title: '新的页面标题',

    })

使用wx.setNavigationBarColor接口可以动态改变当前页面导航栏的颜色，

该接口传Object参，参属性如下所示：

frontColor：必填，前景颜色值，包括按钮、标题、状态栏的颜色，仅支持#ffffff和#000000

backgroudColor:必填，背景颜色值

animation：动态变化时的动态效果，详细内容另起一段见下文

三回调函数

animation属性是一个Object值，其中有两有效属性：duration，表示时间变化，单位毫秒，默认值0；timingFunc,表示动画的变化方式，默认值linear，可选值如下所示：

linear：动画从头到尾的速度同

easeIn：动画以低速开始

easeOut：动画以低速结束

easeInOut：动画以低速开始和结束

示例代码如下：

wx.setNavigationBarColor({

      backgroundColor: '#ffffff',

      frontColor: '#ff0000',

      animation:{

        duration: 400,

        timingFunc: 'easeIn'

      }

    })