uniapp卡片式轮播图——uView

1、下载安装uView

uView2.0重磅发布，利剑出鞘，一统江湖 - DCloud 插件市场

2、在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后

// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

3、在项目根目录的uni.scss中引入uView的全局SCSS主题文件

/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';

4、引入uView基础样式

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

5、组件中引用

<!-- 搞个卡片式轮播图 -->
	<!-- #ifndef APP-NVUE || MP-TOUTIAO -->
		<view class="u-demo-block">
		<!-- <text class="u-demo-block__title">卡片式</text> -->
		     <u-swiper
		           :list="list3"
		           previousMargin="30"
		           nextMargin="30"
		           circular
		           radius="5"
		           bgColor=""
		      ></u-swiper>
		</view>
	<!-- #endif -->

js中获取数据：

data() {
	return {
		list3: [
			'https://cdn.uviewui.com/uview/swiper/swiper3.png',
			'https://cdn.uviewui.com/uview/swiper/swiper2.png',
			'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		]
    }
}