uni-app 预览并使用模板

ゝ一纸荒年。 2023-06-01 12:49 14阅读 0赞

一、预览

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/uni@2x.png" 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的图片，所以也将图片复制到自己项目中去了，否则会报错，自己也可以通过看报错排查问题哦

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关【uniapp】视频分享预览小程序

六一收到个不同以往的需求，我的指导老师最近有点忙，让我们帮忙做一个可以通过二维码预览视频的小程序 ![在这里插入图片描述][ab127f214fa74b9d880c0e7f

川长思鸟来/ 2023年10月12日 08:51/ 0 赞/ 69 阅读

相关 uniapp中上传图片并实时预览

这里只做记录，详细的api请看官方文档 html <view class="pop-contain"> <scroll-view scroll-y cl

分手后的思念是犯贱/ 2023年07月12日 11:44/ 0 赞/ 28 阅读

相关 uni-app 预览并使用模板

一、预览 1.作者是使用Hbuilder X 编辑器 2.文件---新建---项目---uni-app---Hello uni-app 3.找到App.vue---运行-

ゝ一纸荒年。/ 2023年06月01日 12:49/ 0 赞/ 15 阅读

相关 uniapp H5文件预览，PDF预览

1.下载[点击跳转下载][Link 1] ![20210413113554991.png][] 2.解压，拷贝 hybrid 目录到你的项目目录下 ![202104131

怼烎@/ 2022年11月18日 13:36/ 0 赞/ 699 阅读

相关 vue word预览，excel预览，pdf预览

一、word预览–mammoth.js 安装：`npm install --save mammoth` tip：只能预览.docx文件 word.vue:

淩亂°似流年/ 2022年11月15日 11:13/ 0 赞/ 706 阅读

相关 uniapp预览图片

一、需求最近有一个留言板需求，留言之后需要展示留言信息，信息里面除了文字还有图片。点击图片，可预览图片。就用到了 uniapp 预览图片的功能：u

以你之姓@/ 2021年09月03日 05:51/ 0 赞/ 1309 阅读

相关 uniapp 实现图片预览单图预览和多图预览

uniapp 实现图片预览单图预览和多图预览关键点就是调用 uni.previewImage({ current: index,

落日映苍穹つ/ 2021年09月02日 03:18/ 0 赞/ 2398 阅读

相关 uniapp——图片的上传和预览

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

待我称王封你为后i/ 2021年07月25日 18:10/ 0 赞/ 918 阅读

相关 uniapp实战——完成图片的预览功能

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2021年07月25日 17:23/ 0 赞/ 973 阅读

相关 uniapp - 图片的上传和预览

图片的上传和预览 uni.chooseImage(OBJECT) uni.previewImage(OBJECT) 一个图片上传和预览的 demo 实例

红太狼/ 2021年07月25日 14:47/ 0 赞/ 1419 阅读