uniapp卡片式轮播图——uView

cocanile

已于 2022-04-23 19:21:12 修改

阅读量3.6k

点赞数

分类专栏： uniapp 小程序前端文章标签：前端微信小程序 scss

于 2022-04-23 19:18:11 首次发布

本文链接：https://blog.youkuaiyun.com/phper_coca/article/details/124368514

版权

uniapp 同时被 3 个专栏收录

4 篇文章

订阅专栏

小程序

4 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

本文介绍了如何在项目中下载安装uView2.0，并通过在main.js和uni.scss中引入相关文件来设置全局主题。接着展示了在组件中引用uView的u-Swiper组件创建卡片式轮播图的步骤，并提供了数据示例。通过这些步骤，开发者可以轻松地在项目中应用uView的轮播图功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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',
		]
    }
}