[toc] # 2.1 首页开发(一) ## 2.1.1 实现效果图  ## 2.2.2 实现头部标题栏模块 1. 在pages.json设置头部标题栏 * 设置导航栏背景颜色 * 设置下拉窗口背景色 * 设置标题内容 * 设置标题颜色 ``` "globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "九月直播", "navigationBarBackgroundColor": "#8745FF", "backgroundColor": "#8745FF" }, ``` 2. 在pages.json的style属性里面通过app-plus设置app端头部标题栏 * 通过titleNView的`titleText`,`titleAlign`属性设置标题和标题位置 * 通过通过titleNView的`buttons`属性设置菜单按钮 ``` "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "app-plus": { "titleNView": { "titleAlign":"left", "titleText":"直播", "buttons":[ { "type" : "menu" } ] } } } }, { "path": "pages/my/my", "style": { } } ] ``` ## 2.2.3 实现轮播图模块 1. 用ps打开设计稿 2. 用ps设置设计稿的图像大小为750px,这样我们测出来的像素就是多少rpx 3. 使用swiper组件实现轮播图效果 ``` <!-- 轮播图模块 --> <swiper style="width:750rpx; height:250rpx;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="200"> <swiper-item> <image src="../../static/demo/banner/1.jpg" style="width: 100%; height: 250rpx;"></image> </swiper-item> <swiper-item> <image src="../../static/demo/banner/2.jpg" style="width: 100%; height: 250rpx;"></image> </swiper-item> </swiper> ``` ## 2.2.4 实现直播列表模块 ``` <!-- 列表模块 --> <view class="flex flex-wrap"> <view style="width: 375rpx;height:375rpx; padding: 5rpx; box-sizing: border-box;"> <image src="../../static/tabbar/min.png" style="width: 365rpx; height: 365rpx;" class="rounded"></image> </view> <view style="width: 375rpx; padding: 5rpx; box-sizing: border-box;"> <image src="../../static/tabbar/min.png" style="width: 365rpx; height: 365rpx;" class="rounded"></image> </view> <view style="width: 375rpx; padding: 5rpx; box-sizing: border-box;"> <image src="../../static/tabbar/min.png" style="width: 365rpx; height: 365rpx;" class="rounded"></image> </view> <view style="width: 375rpx; padding: 5rpx; box-sizing: border-box;"> <image src="../../static/tabbar/min.png" style="width: 365rpx; height: 365rpx;" class="rounded"></image> </view> </view> ```