小程序自定义navbar和自定义下拉刷新

一、自定义navbar

小程序的navbar可以通过设置当前页面的配置项"navigationStyle": "custom",，就可以设置不同的navbar样式。直通车

也可以引用第三方框架库实现，比如uviewUI 中的 navbar组件

二、自定义下拉刷新

页面打开下拉刷新，需要开启"enablePullDownRefresh":true，但是loading样式无法更改：

如果想要实现定义下拉刷新，可以使用scroll-view组件实现，而不用开启enablePullDownRefresh：

<view>
    <!-- 自定义navbar -->
    <navbar title="首页"></navbar>
    <scroll-view
      scroll-y
      style="height: 500px"
      refresher-enabled
      refresher-default-style="none"
      :refresher-threshold="50"
      :refresher-triggered="triggered"
      refresher-background="rgb(0, 48, 135)"
      @refresherpulling="onPulling"
      @refresherrestore="onRestore"
    >
      <view style="height: 500px; background-color: rgb(0, 48, 135)">
         <!-- 自定义loading -->
        <u-loading-icon v-if="triggered"></u-loading-icon>
        <view>内容</view>
        <view>内容</view>
        <view>内容</view>
        <view>内容</view>
      </view>
    </scroll-view>
  </view>

通过js控制下拉刷新的状态开启

onPulling() {
  this.triggered = true
  setTimeout(() => {
  // 设置下拉刷新状态
    this.triggered = false
  }, 3000)
},
onRestore() {
  console.log('onRestore')
},

效果图如下：

这篇好文章是转载于：学新通技术网