一、在HbuilderX中新建uniapp项目
其目录结构如下:
二、配置底部tabBar
在pages.json中,添加“tabBar”属性
其中的页面和图标路径配置如下:
效果图如下:点击可切换
三、swiper轮播组件
比如实现这个效果,只需要引用swiper组件即可,如下
<swiper class="swiper" circular indicator-dots>
<swiper-item>
<view class="swiper-item uni-bg-red"><image src="../../static/swiper/lunbo1-min.jpg"></image></view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green"><image src="../../static/swiper/lunbo2-min.jpg"></image></view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue"><image src="../../static/swiper/lunbo3-min.jpg"></image></view>
</swiper-item>
</swiper>
其样式如下
swiper {
image {
width: 750rpx;
height: 314rpx;
}
}