微信小程序--轮播图，标题，盒子，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 ;
}