UNIAPP框架uView初步集成与开发设计

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><imagesrc="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>