Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第13章 uni-app核心基础 13.3 常用特效
Vue.js核心技术解析与uni-app跨平台实战开发学习笔记
第13章 uni-app核心基础
文章目录
- Vue.js核心技术解析与uni-app跨平台实战开发学习笔记
- 第13章 uni-app核心基础
- 13.3 常用特效
- 13.3.1 tabBar导航的使用
- 13.3.2 swiper轮播图使用
13.3 常用特效
13.3.1 tabBar导航的使用
tabBar一般用于底部导航，在pages.json中进行设置。
举个栗子
"tabBar": {
"borderStyle": "white",
"backgroundColor": "#dbdbdb",
"selectedColor": "#02b6ff",
"color": "#666",
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/api.png",
"selectedIconPath": "static/apiHL.png"
},
{
"text": "登录",
"pagePath": "pages/login/login",
"iconPath": "static/component.png",
"selectedIconPath": "static/componentHL.png"
}
]
}
运行效果
13.3.2 swiper轮播图使用
举个栗子
<template>
<view class="content">
<swiper :indicator-dots="true" :autoplay="true" :interval="1500" :duration="1000">
<swiper-item>
<view class="swiper-item">
<image src="../../static/1.png" mode="widthFix" class="bannerImg"></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<image src="../../static/2.png" mode="widthFix" class="bannerImg"></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<image src="../../static/3.png" mode="widthFix" class="bannerImg"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>
运行效果
- indicator-dots属性：是否显示指示点
- indicator-color属性：设置指示点颜色
- indicator-active-color属性：当前选中的指示点颜色
- autoplay属性：轮播图是否自动切换
- interval属性：轮播图自动切换的时间间隔
- duration属性：滑动动画时间。