SwiperPanel轮播面板

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-swiperPanel": "/miniprogram_npm/vtuweapp/swiperPanel/swiper/vtu-swiperPanel",
    3.     "vtu-swiperPanel-item": "/miniprogram_npm/vtuweapp/swiperPanel/item/vtu-swiperPanel-item"
    4. }
    5.

    代码演示

    基础用法

    1. <vtu-tabs current="{{current}}" bind:change="change">
    2.   <vtu-tab label="标签一" name="name1" badge="hot"></vtu-tab>
    3.   <vtu-tab label="标签二" name="name2" badge="12"></vtu-tab>
    4.   <vtu-tab label="标签三" name="name3"></vtu-tab>
    5.   <vtu-tab label="标签四" name="name4"></vtu-tab>
    6. </vtu-tabs>
    7. <vtu-swiperPanel height="400px" current="{{current}}" bind:change="change">
    8.   <vtu-swiperPanel-item name="name1" bindscrolltoupper="bindscrolltoupper" bindscrolltolower="bindscrolltolower"></vtu-swiperPanel-item>
    9.   <vtu-swiperPanel-item name="name2"></vtu-swiperPanel-item>
    10.   <vtu-swiperPanel-item name="name3"></vtu-swiperPanel-item>
    11.   <vtu-swiperPanel-item name="name4" bindscrolltoupper="bindscrolltoupper" bindscrolltolower="bindscrolltolower"></vtu-swiperPanel-item>
    12.   <view class="swiper" slot="name1">
    13.     <view class="swiper_li" wx:for="{{20}}">区域一内容展示{{index}}</view>
    14.   </view>
    15.   <view class="swiper" slot="name2">
    16.     <view class="swiper_li" wx:for="{{10}}">区域二内容展示{{index}}</view>
    17.   </view>
    18.   <view class="swiper" slot="name3">
    19.     <view class="swiper_li" wx:for="{{15}}">区域三内容展示{{index}}</view>
    20.   </view>
    21.   <view class="swiper" slot="name4">
    22.     <view class="swiper_li" wx:for="{{30}}">区域四内容展示{{index}}</view>
    23.   </view>
    24. </vtu-swiperPanel>
    26. Page({
    27.   data: {
    28.       current: 3
    29.   },
    31.   change: function(e) {
    32.     this.setData({
    33.       current: e.detail.current
    34.     })
    35.   },
    37.   bindscrolltoupper: function(e) {
    38.     let param = e.detail
    39.     wx.showToast({
    40.       title: "Tab{0}滚动到顶部！".format(param.index+1),
    41.       icon: 'none',
    42.       duration: 2000
    43.     });
    44.   },
    46.   bindscrolltolower: function(e) {
    47.     let param = e.detail
    48.     wx.showToast({
    49.       title: "Tab{0}滚动到底部！".format(param.index+1),
    50.       icon: 'none',
    51.       duration: 2000
    52.     });
    53.   }
    54. });
    55.  
    56.

    组件参数

    SwiperPanel 轮播面板 - 图1