coolui-scroller

Appearance

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

NavPannel 切换组件 ​

<coolui-scroller-nav-pannel> 是内容切换容器：默认插槽里放多个 coolui-scroller，通过 active 切换显示哪一个，常与分类导航配合。

对应原生微信小程序版：NavPannel 切换组件

代码演示 ​

vue
<template>
  <coolui-scroller-nav-pannel :active="active" :animation="animation">
    <coolui-scroller class="scroller0" background="#f2f2f2" @contentHeight="getHeight">
      <template #refresh>
        <coolui-scroller-refresh type="logoText" :config="logoConfig" />
      </template>
      <view class="pannel">第一屏内容</view>
    </coolui-scroller>

    <coolui-scroller class="scroller1" background="#f2f2f2" @contentHeight="getHeight">
      <view class="pannel">第二屏内容</view>
    </coolui-scroller>
  </coolui-scroller-nav-pannel>
</template>

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

const active = ref(0)        // 当前显示第几屏，由 nav 的 change 事件同步
const animation = ref(true)  // 是否开启切换动画
const logoConfig = ref({
  height: 50,
  text: { content: 'coolui-scroller', size: 40 },
})

function getHeight(height: number) {
  // 各屏内容高度，用于撑开容器
}
</script>
vue
<template>
  <coolui-scroller-nav-pannel :active="active" :animation="animation">
    <coolui-scroller class="scroller0" background="#f2f2f2" @contentHeight="getHeight">
      <template #refresh>
        <coolui-scroller-refresh type="logoText" :config="logoConfig" />
      </template>
      <view class="pannel">第一屏内容</view>
    </coolui-scroller>

    <coolui-scroller class="scroller1" background="#f2f2f2" @contentHeight="getHeight">
      <view class="pannel">第二屏内容</view>
    </coolui-scroller>
  </coolui-scroller-nav-pannel>
</template>

<script>
export default {
  data() {
    return {
      active: 0,        // 当前显示第几屏，由 nav 的 change 事件同步
      animation: true,  // 是否开启切换动画
      logoConfig: {
        height: 50,
        text: { content: 'coolui-scroller', size: 40 },
      },
    }
  },
  methods: {
    getHeight(height) {
      // 各屏内容高度，用于撑开容器
    },
  },
}
</script>

属性 ​

属性说明类型默认值
active当前显示第几屏Number0
animation切换是否带过渡动画Booleanfalse
type切换方式：side（左右滑动）/ fade（淡入淡出）String'side'

插槽 ​

插槽说明
默认多个 coolui-scroller，顺序与 active 对应

与原生版的差异 ​

  • 属性一致；
  • 实现方式不同：原生通过 relations 统计子 scroller 的数量与宽高来定位，uni-app 版改为纯 CSS（transform: translateX(-100% * active)），因此子 scroller 必须是直接子节点，中间不要再包一层。

相关 ​