微信小程序 flex实现导航实例详解

微信小程序 flex实现导航实例详解

实现示意:

1.链接顶部内边距,留出圆形图标的位置。
2.伪元素:before绘制圆形。
3.圆形中添加图标。
4.左右外边距控制间距,及促使在需要的地方换行。

wxml:

<view class="serviceMenu">
 <navigator url="http://xwbline.com/">资本</navigator>
 ……
</view>

wxss:

.serviceMenu{
 display:flex; //使用flex布局
 flex-wrap:wrap; //子元素换行
 justify-content:center; //子元素居中对齐
 padding:30rpx 0; //留出上下边距
}
.serviceMenu navigator{
 position:relative; //为了绝对定位
 padding-top:120rpx; //留出圆形图标的位置
 flex-basis:140rpx; //设定基础宽度
 margin:15rpx; //触发换行位置(小程序会自动换算,不必考虑适配)
 text-align:center;
 font-size:24rpx;
}
//创建图标
.serviceMenu navigator:before{
 content:"\20";
 position:absolute;
 top:0;
 left:50%;
 margin-left:-55rpx;
 width:110rpx;
 height:110rpx;
 border-radius:50%;
 background:#bbc1cd;
}
//设定不同图标。注意链接地址是绝对地址,因为小程序不支持相对地址的背景图。只支持image相对地址。
.serviceMenu navigator:nth-child(1):before{
 background:#fc6e51 url(http://xwbline.com/icon_service_big01.png) no-repeat center center;
}
.serviceMenu navigator:nth-child(2):before{
 background:#48cfad url(http://xwbline.com/icon_service_big02.png) no-repeat center center;
}
 ………………

如果需要字数限制的话:

text{
 display:block;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

(0)

相关推荐

  • 微信小程序访问node.js接口服务器搭建教程

    前言 最近在做微信的应用号小程序开发,小程序的后台数据接口需要https安全请求,所以需要我的nodejs服务器能够提供https的支持,现在就将整个https服务器的搭建过程说一下. 搭建教程如下: 首先,我试了一下以前的过期的证书,在开发者工具里模拟的时候可以正常访问接口,在手机里测试时候微信小程序的wx.request是会报SSL握手失败的错误(request error : request: fail ssl hand shake error),所以只能重新申请一个证书,这里推荐使用阿里

  • 微信小程序 图片上传实例详解

    一.了解wx.chooseImage(OBJECT) 二.代码编程 在pages文件里面创建uploadimg文件夹 1.编写页面结构:uploadimg.wxml <view class="container" style="padding:1rem;"> <button type="primary"bindtap="chooseimage">获取图片</button> <image

  • 微信小程序中多个页面传参通信的学习与实践

    前言 微信小程序越来越火,不少公司都在将原生代码转为微信小程序代码.在开发过程中,由于微信小程序wx.navigateBack方法并不支持返回传参,导致一些页面,尤其是从列表页面跳入详情页,用户在详情页改变了状态,返回后无论是否刷新页面,体验都不是很好.在android中,我们一般采用setresult方法来返回参数,或者直接使用rxjava框架或者eventbus框架来解决此类问题. 业务分析 此类需求大概意思是:A页面进入B页面,B页面返回并传值给A. 探索之路 刚开始我想采用一个比较偷懒的

  • 微信小程序 开发之全局配置

    一.app.json 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 注意在.json不能注释,否则会出错. 二.工具栏tabBar 如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. tabBar 是一个数组,只能配置最少2个.最多5个 tab,tab 按数组的顺序排序 app.js

  • 微信小程序 实例开发总结

    微信小程序 开发过程中遇到问题总结 第一次正式开发一个小程序,就从以下几个方面来谈一谈小程序的开发过程和心得吧,主要说说这次项目中用到的功能. 数据请求 这次的小程序,没有太多的附加功能,所以数据以及对数据的处理是这次的主体工作,小程序向用户提供API,供用户向自己的服务器请求数据,值得一提的是,开发小程序之前,需要先在微信公众平台申请appID,并且绑定域名,域名必须是https协议,然后在小程序的开发工具的配置信息中完善信息,请求的地址需要在前面绑定的域名下.这个项目中用到wx.reques

  • 微信小程序 wx:for的使用实例详解

    微信小程序 wx:for的使用实例详解 在小程序的开发过程中,经常会用到在前端页面循环打印一个数组或者对象的数据,这样的话就需要用wx:for来实现. 一般情况下,小程序的utils这个文件夹下,我们可以把本地的数据写进去,封装成.js文件,提供对外暴露的接口,然后读取本地数据,这些在上一篇博客中有详细介绍.我们最后说到写好的本地数据可以另一个页面读取: var fileData = require('../../utils/data.js') Page({ data: { showData:

  • 微信小程序 本地数据读取实例

    微信小程序 本地数据读取实例 一般情况下,小程序的utils这个文件夹下,我们可以把本地的数据写进去,封装成.js文件,提供对外暴露的接口,然后读取本地数据.如果涉及到一些针对这些数据的处理方法,也可以把方法写好,封装到.js文件里面,然后需要时调用. module.exports = { mtData: mtData, searchmtdata: searchmtdata, usedraw: usedraw } var mt_data = mtData() function searchmtd

  • 微信小程序 自动登陆PHP源码实例(源码下载)

    微信小程序 自动登陆PHP源码实例 app.js 初始化APP自动登陆 您也可以在任何地方进行用户登陆验证 用法:首先在js文件中定义 var app = getApp(); app.getUserDataToken(); App({ onLaunch: function () { /*初始化APP自动登陆 * 您也可以在任何地方进行用户登陆验证 *用法:首先在js文件中定义 var app = getApp(); app.getUserDataToken(); */ this.getUserD

  • 微信小程序 flex实现导航实例详解

    微信小程序 flex实现导航实例详解 实现示意: 1.链接顶部内边距,留出圆形图标的位置. 2.伪元素:before绘制圆形. 3.圆形中添加图标. 4.左右外边距控制间距,及促使在需要的地方换行. wxml: <view class="serviceMenu"> <navigator url="http://xwbline.com/">资本</navigator> -- </view> wxss: .serviceM

  • 微信小程序 本地数据存储实例详解

    微信小程序 本地数据存储实例详解 前言 如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能,甚至可以使用sqlite数据库来做存储.可是微信的小程序框架基于微信本身,其实际运行环境只是在浏览器里面,所以不会提供那么丰富的数据存储实力.但html5开始已经可以在浏览器里面存储数据,好在微信的小程序给这个功能封装好了,这样我们可以使用数据存储. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStor

  • 微信小程序 动态传参实例详解

    微信小程序 动态传参实例详解 在微信小程序的开发过程中经常会用到动态传参,比如根据某一页面传参的不同,加载不同的新的页面.接下来介绍下如何实现. 上一篇博客中介绍了如何用wx:for循环显示数组,一般情况下我们要实现的功能是点击不同的元素进入不同的页面,比如在另一个页面加载某个元素的详细信息. 跳转这里采用navigator跳转,在navigator跳转的链接上将参数加上去: index.wxml(根据点击页面的不同传递参数) <view class="item" wx:for=

  • 微信小程序 检查接口状态实例详解

    微信小程序 检查接口状态实例详解 实例代码: // 检查接口是否可用 wx.getSetting({ success(res) { if (!res['scope.record']) { // 接口调用询问 wx.authorize({ scope: 'scope.userInfo', success(res) { wx.startRecord() // 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问 }, fail() { }, complete()

  • 微信小程序 POST请求的实例详解

     微信小程序 POST请求的实例详解 在微信小程序里post请求和get情求,写法差不多,但是还是有一点点不同的,下面利用post请求做一个查询天气的微信小程序demo. 页面代码: <view> {{title}} </view> <span style="font-size:24px;"><!--index.wxml--> <view class="container"> <view style=

  • 微信小程序-getUserInfo回调的实例详解

    微信小程序-getUserInfo回调的实例详解 前言: 这里就不吹嘘微信小程序有多厉害了,毕竟也不是我写的,直接谈谈我在做小程序开发时遇到的奇异Bug. getUserInfo多次调用: 对于wx.getUserInfo应该很多开发者都用过,用于获取用户基本信息,前提是需要用户授权,如果用户先前没有授权,则弹出一个提示框如下: 点击允许后,我们就能拿到用户信息,再进行后面的一系列操作.这一切看起来都是那么美好,可是在某次运行中,点允许授权后,程序并没有按照我们的预期往下执行.最后发现在其他的地

  • 微信小程序 表单Form实例详解(附源码)

    微信小程序 表单Form实例 表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用 form表单,将组件内输入的"switch","input","checkbox","slider","radio","picker"的值进行提交,数据的格式为:name:value,所以表单中控件都需要添加name属性,否则找不到对应控件

  • 微信小程序 获取相册照片实例详解

    微信小程序 获取相册照片 今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: 小demo,代码很简单. 1.index.wxml <!--index.wxml--> <button style="margin:30rpx;" bindtap="chooseimage">获取图片</button> <image src="{{tempFilePaths }}" mode="a

  • 微信小程序 封装http请求实例详解

    微信小程序 封装http请求 最近看了一下微信小程序,大致翻了一下,发现跟angular很相似的,但是比angular简单的很多具体可参考官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=2017112 下面将封装http请求服务部分的服务以及引用部分 // 本服务用于封装请求 // 返回的是一个promisepromise var sendRrquest = function (ur

  • 微信小程序开发之Tabbar实例详解

    微信小程序 Tabbar 1.下载微信小程序开发软件: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 2.扫描二维码登录,在手机点击确认登录 3.新建一个项目,这里选择无APPID,如果需要填写APPID,需要到微信小程序里面注册,然后就可以获取APPID,填写项目名称,选择项目目录(注释:微信小程序不会自己创建主目录文件,所以自己先建立一个项目文件夹,然后选择存放到这个文件夹中),添加项目,就

随机推荐