uni-app 預覽並使用模板

一、預覽

1.作者是使用Hbuilder X 編輯器

2.文件---新建---項目---uni-app---Hello uni-app

3.找到App.vue---運行---運行到小程序模擬器（就可預覽uni-app自帶的組件了）

二、使用

1.在第一步預覽的時候看到了想要使用的組件（例如作者想要用---模板---滾動廣告---豎向滾動）

2.在項目下面---page---template---scrollmsg

3.複製template代碼

<view class="uni-title uni-common-mt">
豎向滾動
</view>
<view class="uni-swiper-msg">
	<view class="uni-swiper-msg-icon">
		<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/[email protected]" mode="widthFix"></image>
	</view>
	<swiper vertical="true" autoplay="true" circular="true" interval="3000">
		<swiper-item v-for="(item, index) in msg" :key="index">
			<navigator>{{item}}</navigator>
		</swiper-item>
	</swiper>
</view>

3.複製script代碼

export default {
	data() {
		return {
			title:"滾動公告",
			msg : [
				'uni-app行業峯會頻頻亮相，開發者反響熱烈',
				'DCloud完成B2輪融資，uni-app震撼發佈',
				'36氪熱文榜推薦、CSDN公號推薦 DCloud CEO文章'
			]
		}
	}
}

4.找到項目下面的App.vue，查看style代碼，將以下代碼中引入的uni.css在項目中找到，並將css複製到自己項目中去

 /* uni.css - 通用組件、模板樣式庫，可以當作一套ui庫應用 */
    @import './common/uni.css';

注意：作者引用的這個css中，有一個uni.ttf的圖片，所以也將圖片複製到自己項目中去了，否則會報錯，自己也可以通過看報錯排查問題哦