小程序导航按钮列表实现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'}]

小程序导航按钮列表实现navigator相关推荐

微信小程序导航组件 navigator使用
文章目录一.微信小程序导航组件 navigator使用二.路由跳转页面传参&接收参数一.微信小程序导航组件 navigator使用 //pages/index/index <nav ...
微信小程序导航：免费视频+精品教程+DEMO集合（长期更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
微信小程序 - 展开收缩列表
代码源自于:微信小程序示例官方 index.wxml 1 <block wx:for-items="{{list}}" wx:key="{{item.id}}&qu ...
小程序 | 微信小程序实现商品分类列表
小程序 | 微信小程序实现商品分类列表一.效果展示二.代码实现  <view class="container"> <! ...
微信小程序显示分页列表
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
八月微信小程序导航：官方文档+精品教程+demo集合（8月25...
2019独角兽企业重金招聘Python工程师标准>>> 1:官方工具: https://mp.weixin.qq.com/debug/w ... tml?t=147643467846 ...
zblog小程序导航主题模板，简单好用小程序商城主题设置方法
小程序现在非常的火爆,大家的手游内存是有限的,无需下载的小程序就能为大家提供和app相同的服务,非常的受欢迎.不过由于小程序数量太多,怎么才能顺利找到想要找到的小程序呢?小程序导航站就应运而生,如何做 ...
微信小程序导航栏高度。分析手机状态栏高度、微信小程序胶囊高度等。
//获取系统信息的概念 console.log(uni.getSystemInfoSync()); let res = uni.getSystemInfoSync() //胶囊按钮的信息 consol ...
微信小程序快速建立列表
如何在微信小程序中建立列表,并且实现列表项的动态增添,点击某一列表项实现界面的跳转,可以通过navigator组件进行表示. wxml文件 <view class="box" ...
微信小程序——添加按钮格式
微信小程序--添加按钮步骤一:在wxml文件中添加按钮代码(图后提供可复制代码) <button class = "button_cat">炸炸呼呼</butt ...

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

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

2 wxss ***文本

小程序导航按钮列表实现navigator相关推荐

最新文章

热门文章

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

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

2 wxss ***文本

小程序 导航按钮列表实现navigator相关推荐

最新文章

热门文章

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

小程序导航按钮列表实现navigator相关推荐