微信小程序--轮播图，标题，盒子，tab栏的合成例子

小程序是什么?

微信小程序，是一种不需要下载安装即可使用的应用，用户扫一扫或搜一下即可打开应用，在微信-发现-小程序可打开应用。

一.小程序的样式编写：

目录结构：

app.json

 {
   "pages": [
     "pages/index/index",
     "pages/message/message",
     "pages/userCenter/userCenter",
     "pages/contact/contact"
   ],
   "window": {
     "navigationBarBackgroundColor": "#13d1be",
     "navigationBarTextStyle": "black",
     "navigationBarTitleText":"本地宝",
     "backgroundColor": "#eeeeee",
     "backgroundTextStyle": "light",
     "enablePullDownRefresh": false
   },
     "tabBar": {
         "selectedColor":"rgb(238, 82, 61)",
         "list": [{
             "pagePath": "pages/index/index",
             "text": "主页",
             "iconPath": "tabs/home.png",
             "selectedIconPath": "tabs/home-active.png"
         },
         {
             "pagePath": "pages/message/message",
             "text": "消息",
             "iconPath": "tabs/message.png",
             "selectedIconPath": "tabs/message-active.png"
         },
         {
             "pagePath": "pages/userCenter/userCenter",
             "text": "我的",
             "iconPath": "tabs/profile.png",
             "selectedIconPath": "tabs/profile-active.png"
         },
         {
             "pagePath": "pages/contact/contact",
             "text": "联系我们",
             "iconPath": "tabs/contact.png",
             "selectedIconPath": "tabs/contact-active.png"
         }
         ]
     }
 }

公共样式：

 /*公共的样式  */
 /*伪元素边框-不占位置  */
 .bd-r,.bd-t{
     position: relative;
 }

 .bd-r::after,.bd-t::before{
     content: "";
     position: absolute;
     left:0;
     top:0;
     width: 100%;
     height: 1rpx;
     background-color: rgb(239, 239, 239);
 }

 .bd-r::before{
     right: 0;
     left: auto;
     width:1rpx;
     height: 100%;
 }

 .h100-block{
     height: 10rpx;
     background-color: #f0f0f0;
 }

 /*利用flex伸缩盒属性，实现栅格化布局  */
 .row{
     display: flex;
 }

 .row .col{
     flex: 1;
 }

主页页面编写：

index.wxml

 <!--pages/index/index.wxml-->
 <block>
   <swiper indicator-dots="true" autoplay="true" interval="3000" duration="500" indicator-color='#f99' indicator-active-color='#f11' circular='true'>
     <swiper-item>
       <image src="../../images/banner-01.png" width="375" height="150" />
     </swiper-item>
     <swiper-item>
       <image src="../../images/banner-02.png" width="375" height="150" />
     </swiper-item>

     <swiper-item>
       <image src="../../images/banner-01.png" width="375" height="150" />
     </swiper-item>
     <swiper-item>
       <image src="../../images/banner-02.png" width="375" height="150" />
     </swiper-item>
   </swiper>
 </block>

 <block>
   <view class='index-nav'>
     <navigator>
       <view class='img bd-r bd-t'>
         <image src='../../icons/grid-01.png'></image>
         <text>美食</text>
       </view>
     </navigator>

     <navigator>
       <view class='img bd-r bd-t'>
         <image src='../../icons/grid-02.png'></image>
         <text class='xizu'>洗浴足疗</text>
       </view>
     </navigator>

     <navigator>
       <view class='img bd-r bd-t'>
         <image src='../../icons/grid-03.png'></image>
         <text class='jiehuntxt'>结婚啦</text>
       </view>
     </navigator>

     <navigator>
       <view class='img bd-r bd-t'>
         <image src='../../icons/grid-04.png'></image>
         <text class='ktvtxt'>KTV</text>
       </view>
     </navigator>

     <navigator>
       <view class='img bd-r bd-t'>
         <image src='../../icons/grid-05.png'></image>
         <text class='findworktext'>找工作</text>
       </view>
     </navigator>

     <navigator>
       <view class='img bd-r bd-t'>
         <image src='../../icons/grid-06.png'></image>
         <text class='fudao'>辅导班</text>
       </view>
     </navigator>

     <navigator>
       <view class='img bd-r bd-t'>
         <image src='../../icons/grid-07.png'></image>
         <text class='qichetext'>汽车保养</text>
       </view>
     </navigator>

     <navigator>
       <view class='img bd-r bd-t'>
         <image src='../../icons/grid-08.png'></image>
         <text>租房</text>
       </view>
     </navigator>

     <navigator>
       <view class='img bd-r bd-t'>
         <image src='../../icons/grid-09.png'></image>
         <text>装修</text>
       </view>
     </navigator>
   </view>
 </block>
 <view class='h100-block'></view>

 <view class='index-enter row'>

   <view class='col'>
     <navigator>
     <image src='../../images/link-01.png'></image>
    </navigator>
     </view>

   <view class='col'>
     <navigator>
     <image src='../../images/link-02.png'></image>
    </navigator>
     </view>
 </view>

主页样式：index.wxss

 /* pages/index/index.wxss */
 swiper-item image{
     width: 750rpx;
     height: 340rpx;
 }
 .index-nav{
     overflow: hidden;
 }
 .img{
     text-align: center;
     font-size: 14px;
     float: left;
     width:33.3%;
     height: 198rpx;

     /* box-sizing: border-box;
     border-left: 1rpx solid rgb(239, 239, 239);
     border-bottom: 1rpx solid rgb(239, 239, 239);  */
 }
 /*选择第三个元素的倍数，把修饰用的边框隐藏  */
 /*nth-of-type：选中类型的的第几个
     ::before需要配合content:''使用

 */
 .img:nth-of-type(3n)::before{
     background-color: transparent;
 }

 .img image{
     width: 90rpx;
     height: 90rpx;
     display: block;
     margin: 40rpx auto 20rpx;
 }

 .img text{
     display: block;
 }

 .xizu{
     left: 21%!important;
 }
 .jiehuntxt{
     left: 29%!important;
 }

 .findworktext{
     left: 29%!important;
 }
 .fudao{
     left: 29%!important;
 }
 .qichetext{
     left: 21%!important;
 }

 .index-enter image{
     width: 320rpx;
     height: 175rpx;
 }

 .index-enter{
     text-align: center;
     padding: 10rpx ;
 }