小程序 导航按钮列表实现navigator

小知识鉴别

inline（行内元素）:不会独占一行. 不能更改元素的height，width的值，大小由内容撑开.可以使用padding,margin只有left和right产生边距效果，但是top和bottom就不行.

block（块级元素）:独占一行,默认填满父级元素的宽度. 够改变元素的height，width的值. 可以设置padding，margin的各个属性值

inline-block（融合行内于块级）:不独占一行的块级元素 存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的,

去除空隙的方法：对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px

1 wxml   **最外边包裹一层view主要是添加一个和上边swiper的margin，其实可有可无

<view class="container">
    <!-- swiper轮播图 -->
    <!-- <view class="swiper-container" hover-class="none" hover-stop-propagation="false"> -->
        <swiper class="top-swiper"   indicator-dots="true" autoplay="true"  circular="true" vertical="{{false}}" >
            <block wx:for="{{swiperitems}}">
                <swiper-item class="top_swiper_item" >
                    <image class="swiper-image" src="{{item}}" mode="scaleToFill" ></image>
                </swiper-item>
            </block>
        </swiper>
    <!-- </view> -->

    <!-- 导航按钮 -->
    <view class="bottom-nav" >
        <block wx:for="{{navItems}}">
            <view class="wrap-item {{item.isSplot?'border-all':'border-bottom'}}" >
                <navigator  target="" url="../../pages/{{item.url}}/{{item.url}}" hover-class="navigator-hover" open-type="navigate">
                    {{item.name}}
                </navigator>
            </view>
        </block>
    </view>
</view>

2 wxss   ***文本   

@1垂直居中--line-height = 容器高度  水平居中text-align:center;

text-align只能控制水平方向上的居中

@2 不设置高度，使用padding-top = padding-bottom来进行文字的水平居中

page {
	height: 100%;
}

.container {
	height: 100%;
	box-sizing: border-box;
	background-color: #f4f4f4;
}
.bottom-nav{
    width: 100%;
    margin-top: 2rpx;
}
.wrap-item{
    display: inline-block;
	width: 33%;
	height: 200rpx;
	line-height: 200rpx;
	background-color: #fff;
	text-align: center;
}
.border-bottom{
    border-bottom: 1px solid #ddd;
}
.border-all{
    border: 1px solid #ddd;
    border-top: 0;
}

3 js

 navItems:[
      {
        name:'堂食',
        url:'dishes'
      },
      {
        name:'外卖',
        url:'take',
        isSplot:true
      },
      {
        name:'外带',
        url:'out'
      },
      {
        name:'订单',
        url:'bill'
      },
      {
        name:'帐单',
        url:'bill',
        isSplot:true
      },
      {
        name:'报表',
        url:'bill'
      }
    ]