uni-app_uView1.0 实现自动轮播图功能_uview 实现商品滚动

1、效果，1、自动，2、左右滑动，3、点击item弹出Toast框

2、源码uswiper.vue：

<template>
	<view class="u-demo">

		<u-toast ref="uToast"></u-toast>

		<u-swiper 
		:height="250" 
		:list="list" 
		:effect3d="effect3d" 
		:indicator-pos="indicatorPos" 
		:interval="3000" 
		@click="click">
		</u-swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				effect3d: true,
				indicatorPos: 'bottomCenter',

			}
		},
		methods: {
			click(utoast) {
				this.$refs.uToast.show({
					title: `点击了第${utoast + 1}张图片`,
					type: 'success'
				})
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

3、uswiper.vue代码中：u-demo样式

u-demo样式可以不用写，直接导入封装样式demo.scss，项目先看一下

demo.scss代码：

在App.vue中加上：

4、需要导入第三方项目uview-ui，如下图：

uview-ui官网地址，微信公众号：彬sir哥，关注回复[uView1.0]，获取uview-ui