uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。本文章分享UNIAPP集成使用uView页面动态开发设计。

一、使用HBuilder X 直接导入插件，下载后重启

uView - DCloud 插件市场

二、配置样式

@import "theme.scss"; // 放在代码首行

三、实现效果

四、具体实现代码

<template>
	<view>
		<!-- 录播图 -->
		<view class="wrap">
			<u-swiper :list="list" :effect3d="true" :title="true" indicator-pos="bottomCenter"></u-swiper>
		</view>
		<!-- 二维码 -->
		<view>
			<view class="tit">
				<span style="color: #00BFFF;">欢迎长按下方二维码添加微信咨询</span>
			</view>
			<image show-menu-by-longpress="true" src="/static/image_all/my/wx.jpg" class="btn-icon"
				@click="previewImage">
			</image>
		</view>

		<!-- 新闻图 -->
		<u-card :title="title" :sub-title="subTitle" :thumb="thumb">
			<view class="" slot="body">
				<view class="u-body-item u-flex u-row-between u-p-b-0">
					<view class="u-body-item-title u-line-2">专业承接小程序、VUE、SPRINGBOOT、人工智能系统定制开发</view>
					<image
						src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg"
						mode="aspectFill"></image>
				</view>
			</view>
		</u-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "系统定制开发说明",
				list: [{
						image: 'http://zhonghuan.k9.luyouxia.net:15962/document/4ebe88ba561c4278a29bbc252c743206.png',
						title: '大模型语音问答系统'
					},
					{
						image: 'http://zhonghuan.k9.luyouxia.net:15962/document/3010db26eb364a109ea39c2935893890.jpg',
						title: '一句话声音复刻系统'
					},
					{
						image: 'http://zhonghuan.k9.luyouxia.net:15962/document/fb5c078ac7284cf1ab96f3e9c95aa3d5.jpg',
						title: '个性化特色发音人合成系统'
					}, {
						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: '谁念西风独自凉，萧萧黄叶闭疏窗'
					}
				],
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 40rpx;
	}

	page {
		.tit {
			text-align: center;
			margin: 15px auto;
		}

		.btn-icon {
			display: block;
			height: 364rpx;
			width: 364rpx;
			margin: 15px auto;
		}
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>