coolui-scroller

Appearance

当前文档uni-app 版coolui-scroller-uni 改用 原生微信小程序版 →

SecondFloor 下拉二楼组件 ​

<coolui-scroller-second-floor> 实现「下拉二楼」：下拉到阈值后进入第二个页面（二楼），支持居中、上下方向、缩放等效果。二楼内容的刷新动画用 <coolui-scroller-second-floor-refresh>，顶部导航栏用 coolui-scroller-nav-bar。

对应原生微信小程序版：SecondFloor 下拉二楼组件

代码演示 ​

vue
<template>
  <coolui-scroller-second-floor
    ref="mySecondFloor"
    :threshold="threshold"
    :offset="offset ? 100 : 0"
    :center="type === 'center'"
    :bottom="type === 'bottom'"
    :top="type === 'top'"
    :scale="scale"
    :tip="tip"
    @refresh="onRefresh"
    @secondShow="onSecondShow"
    @secondBack="onSecondBack"
  >
    <!-- 二楼内容 -->
    <template #second-floor>
      <view class="second-floor">二楼</view>
    </template>

    <!-- 二楼下拉刷新 -->
    <template #second-floor-refresh>
      <coolui-scroller-second-floor-refresh :refreshConfig="refreshConfig" />
    </template>

    <!-- 二楼顶部导航栏 -->
    <template #nav-bar>
      <coolui-scroller-nav-bar :config="navBarConfig">下拉二楼</coolui-scroller-nav-bar>
    </template>

    <!-- 一楼内容（默认插槽） -->
    <view class="demopage">一楼内容</view>
  </coolui-scroller-second-floor>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const threshold = ref(0)     // 下拉进度 0~1
const offset = ref(false)    // 是否开启触发偏移
const type = ref('center')   // center | bottom | top
const scale = ref(false)     // 是否开启缩放
const tip = ref({ show: false, height: 100, times: 1, duration: 2000 })

const refreshConfig = ref({
  downText: '下拉刷新',
  loadingText: '加载中...',
  backText: '松开返回',
  color: '#ffffff',
})
const navBarConfig = ref({
  back: { show: true },
  background: { color: '#ffffff' },
  text: { color: '#000000', shadow: 0 },
})

function onRefresh() {
  // 二楼下拉刷新
}

function onSecondShow() {
  // 进入二楼
}

function onSecondBack() {
  // 返回一楼
}
</script>
vue
<template>
  <coolui-scroller-second-floor
    ref="mySecondFloor"
    :threshold="threshold"
    :offset="offset ? 100 : 0"
    :center="type === 'center'"
    :bottom="type === 'bottom'"
    :top="type === 'top'"
    :scale="scale"
    :tip="tip"
    @refresh="onRefresh"
    @secondShow="onSecondShow"
    @secondBack="onSecondBack"
  >
    <!-- 二楼内容 -->
    <template #second-floor>
      <view class="second-floor">二楼</view>
    </template>

    <!-- 二楼下拉刷新 -->
    <template #second-floor-refresh>
      <coolui-scroller-second-floor-refresh :refreshConfig="refreshConfig" />
    </template>

    <!-- 二楼顶部导航栏 -->
    <template #nav-bar>
      <coolui-scroller-nav-bar :config="navBarConfig">下拉二楼</coolui-scroller-nav-bar>
    </template>

    <!-- 一楼内容（默认插槽） -->
    <view class="demopage">一楼内容</view>
  </coolui-scroller-second-floor>
</template>

<script>
export default {
  data() {
    return {
      threshold: 0,     // 下拉进度 0~1
      offset: false,    // 是否开启触发偏移
      type: 'center',   // center | bottom | top
      scale: false,     // 是否开启缩放
      tip: { show: false, height: 100, times: 1, duration: 2000 },
      refreshConfig: {
        downText: '下拉刷新',
        loadingText: '加载中...',
        backText: '松开返回',
        color: '#ffffff',
      },
      navBarConfig: {
        back: { show: true },
        background: { color: '#ffffff' },
        text: { color: '#000000', shadow: 0 },
      },
    }
  },
  methods: {
    onRefresh() {
      // 二楼下拉刷新
    },
    onSecondShow() {
      // 进入二楼
    },
    onSecondBack() {
      // 返回一楼
    },
  },
}
</script>

SecondFloor 属性 ​

属性说明类型默认值
threshold下拉进度 0~1，支持 v-model:thresholdNumber0
offset触发偏移量Number0
center二楼内容是否居中Booleanfalse
bottom从底部下拉Booleantrue
top从顶部下拉Booleanfalse
scale是否开启缩放效果Booleanfalse
tip自动下拉提示 { show, height, times, duration }Object{ show: false, height: 100, times: 1, duration: 2000 }

SecondFloor 事件 ​

事件说明参数
refresh二楼下拉刷新触发—
secondShow进入二楼—
secondBack返回一楼—

插槽 ​

插槽说明
second-floor二楼内容
second-floor-refresh二楼的下拉刷新动画
nav-bar二楼顶部导航栏
默认一楼内容

SecondFloor 实例方法 ​

通过 ref 获取组件实例后调用：

方法说明
back(callback?)返回一楼
settriggered()手动回弹（配合刷新组件不自动回弹的场景）
init(callback?)初始化

SecondFloorRefresh 属性 ​

属性说明类型默认值
refreshConfig文案与颜色配置 { downText, loadingText, backText, tipText, moreText, color }Object{}
backBgColor返回按钮背景色（uni-app 版新增）String''

与原生版的差异 ​

  • second-floor 的属性与事件和原生一致，组件通信由原生 relations 改为 provide/inject；
  • second-floor-refresh 新增 backBgColor；原生 externalClasses（second-floor-refresh-class / second-floor-refresh-back）已移除，页面里用 :deep() 覆盖样式。

相关 ​