swiper

滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图，注意是滑动切换而不是滚动。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。 属性说明 change 事件返回 detail 中包含一个 source 字段，表示导致变更的原因，可能值如下：

  • swiper做左右拖动的长列表问题
  • swiper是单页组件，适合做banner图轮播和简单列表左右滑动。
  • 插件市场新闻模板示例，它在App端使用了nvue的原生渲染，实现高性能的左右拖动长列表；并支持可自定义的任何形式的下拉刷新。它在非App端使用的模式是只缓存左右一共3列的数据，dom中的数据过多时，它会自动释放。就是说App上，只要看过这一页，再进去时内容是还在的。而在非App上，只能做到缓存3页数据，其他页即便看过，再进去也会重新加载。并且非App的这种情况下，不再提供下拉刷新。虽然插件市场也有其他前端模拟的下拉刷新，但性能不佳。一般小程序的大厂案例里，提供左右拖长列表的，都是这种做法。Tips
  • <scroll-view> 一个固定高度，通过 css 设置 height。
  • <swiper-item> 组件，否则会导致未定义的行为。
  • 组件属性设置不生效解决办法
  • uni-app插件市场搜索 -

    swiper-item

    <swiper> 组件中，宽高自动设置为100%。 示例
    1. <template>    <view>        <view class="uni-padding-wrap">            <view class="page-section swiper">                <view class="page-section-spacing">                    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">                        <swiper-item>                            <view class="swiper-item uni-bg-red">A</view>                        </swiper-item>                        <swiper-item>                            <view class="swiper-item uni-bg-green">B</view>                        </swiper-item>                        <swiper-item>                            <view class="swiper-item uni-bg-blue">C</view>                        </swiper-item>                    </swiper>                </view>            </view>        </view>        <view class="swiper-list">            <view class="uni-list-cell uni-list-cell-pd">                <view class="uni-list-cell-db">指示点</view>                <switch :checked="indicatorDots" @change="changeIndicatorDots" />            </view>            <view class="uni-list-cell uni-list-cell-pd">                <view class="uni-list-cell-db">自动播放</view>                <switch :checked="autoplay" @change="changeAutoplay" />            </view>        </view>        <view class="uni-padding-wrap">            <view class="uni-common-mt">                <text>幻灯片切换时长(ms)</text>                <text class="info">{{duration}}</text>            </view>            <slider @change="durationChange" :value="duration" min="500" max="2000" />            <view class="uni-common-mt">                <text>自动播放间隔时长(ms)</text>                <text class="info">{{interval}}</text>            </view>            <slider @change="intervalChange" :value="interval" min="2000" max="10000" />        </view>    </view></template>
    1. export default {    data() {        return {            background: ['color1', 'color2', 'color3'],            indicatorDots: true,            autoplay: true,            interval: 2000,            duration: 500        }    },    methods: {        changeIndicatorDots(e) {            this.indicatorDots = !this.indicatorDots        },        changeAutoplay(e) {            this.autoplay = !this.autoplay        },        intervalChange(e) {            this.interval = e.target.value        },        durationChange(e) {            this.duration = e.target.value        }    }}

在 GitHub 上编辑此页面！