uniapp中swiper如何使用及拓展

曼妙佳人

swiper

视图容器。

一般用于左右滑动或上下滑动，比如banner轮播图。

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

swiper-item

仅可放置在 <swiper> 组件中，宽高自动设置为100%。注意：宽高100%是相对于其父组件，不是相对于子组件，不能被子组件自动撑开。

这里引入ColorUI组件

把colorui目录复制到项目根目录

在App.vue页面style标签中引入

1. @import "colorui/main.css";
   
2. @import "colorui/icon.css";

复制代码

1. <swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
   
2.                  :autoplay="true" interval="5000" duration="500">
   
3.                         <swiper-item v-for="(item,index) in swiperList" :key="index">
   
4.                                 <image :src="item.url" mode="aspectFill"></image>
   
5.                         </swiper-item>
   
6.                 </swiper>

复制代码

1. dotStyle:true,
   
2. swiperList: [{
   
3.                                         id: 0,
   
4.                                         type: 'image',
   
5.                                         url: 'https://ossweb-img.qq.com/images/噜阿噜/web201310/skin/big84000.jpg'
   
6.                                 }, {
   
7.                                         id: 1,
   
8.                                         type: 'image',
   
9.                                         url: 'https://ossweb-img.qq.com/images/噜阿噜/web201310/skin/big37006.jpg',
   
10.                                 }, {
    
11.                                         id: 2,
    
12.                                         type: 'image',
    
13.                                         url: 'https://ossweb-img.qq.com/images/噜阿噜/web201310/skin/big39000.jpg'
    
14.                                 }, {
    
15.                                         id: 3,
    
16.                                         type: 'image',
    
17.                                         url: 'https://ossweb-img.qq.com/images/噜阿噜/web201310/skin/big10001.jpg'
    
18.                                 }, {
    
19.                                         id: 4,
    
20.                                         type: 'image',
    
21.                                         url: 'https://ossweb-img.qq.com/images/噜阿噜/web201310/skin/big25011.jpg'
    
22.                                 }, {
    
23.                                         id: 5,
    
24.                                         type: 'image',
    
25.                                         url: 'https://ossweb-img.qq.com/images/噜阿噜/web201310/skin/big21016.jpg'
    
26.                                 }, {
    
27.                                         id: 6,
    
28.                                         type: 'image',
    
29.                                         url: 'https://ossweb-img.qq.com/images/噜阿噜/web201310/skin/big99008.jpg'
    
30.                                 }],

复制代码

曼妙佳人

流云沙海 发表于 2021-9-30 15:59
最近怎么都搞上uniapp了

因为香

流云沙海

最近怎么都搞上uniapp了