uniapp常用标签
一.uni-app常用标签
该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册
二. 标签用法
1.view
类似于HTML中的div标签通常用于布局和包裹其他标签
2.scroll-view
在指定的区域设置一块可以左右滚动的区域,通常用于下拉刷新和商品主体部分
代码示例
<template>
<scroll-view class="scrollview" scroll-y="true">
<view class="box">0</view>
<view class="box">1</view>
<view class="box">2</view>
<view class="box">3</view>
<view class="box">4</view>
<view class="box">5</view>
<view class="box">6</view>
<view class="box">7</view>
<view class="box">8</view>
<view class="box">9</view>
</scroll-view>
</template>
<script>
</script>
<style>
.scrollview {
height: 100px;
border: 1px solid red;
white-space: nowrap;
}
.box {
widows: 100px;
height: 100px;
background-color: aqua;
}
</style>
3.swiper
用于制作轮播图
代码示例
<template>
<swiper class="swiper" indicator-dots autoplay interval="1000">
<swiper-item class="swiperview">111</swiper-item>
<swiper-item class="swiperview">222</swiper-item>
<swiper-item class="swiperview">333</swiper-item>
<swiper-item class="swiperview">444</swiper-item>
</swiper>
</template>
<script>
</script>
<style>
.swiper {
height: 100px;
border: 1px solid red;
white-space: nowrap;
}
.swiperview {
widows: 100px;
height: 100px;
background-color: aqua;
}
</style>
4.image
相对于HMTL中的img,用于展示图片
代码示例
<template>
<scroll-view class="scrollview" scroll-y="true">
<image src="../../static/1.jpeg" class="imger"></image>
<image src="../../static/2.jpeg" class="imger"></image>
<image src="../../static/3.png" class="imger"></image>
<image src="../../static/4.jpg" class="imger"></image>
<image src="../../static/5.png" class="imger"></image>
</scroll-view>
</template>
<script>
</script>
<style>
.scrollview {
height: 280px;
border: 1px solid red;
}
</style>
5.text
6.navigator
7.button
