[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> ```