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

2024-04-05 20:25:24

微信小程序 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;
}

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

微信小程序自动登陆PHP源码实例（源码下载）

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

一.了解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. 探索之路刚开始我想采用一个比较偷懒的
微信小程序 wx:for的使用实例详解

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

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

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

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

微信小程序开发过程中遇到问题总结第一次正式开发一个小程序,就从以下几个方面来谈一谈小程序的开发过程和心得吧,主要说说这次项目中用到的功能. 数据请求这次的小程序,没有太多的附加功能,所以数据以及对数据的处理是这次的主体工作,小程序向用户提供API,供用户向自己的服务器请求数据,值得一提的是,开发小程序之前,需要先在微信公众平台申请appID,并且绑定域名,域名必须是https协议,然后在小程序的开发工具的配置信息中完善信息,请求的地址需要在前面绑定的域名下.这个项目中用到wx.reques
微信小程序 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;"> <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  <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,填写项目名称,选择项目目录(注释:微信小程序不会自己创建主目录文件,所以自己先建立一个项目文件夹,然后选择存放到这个文件夹中),添加项目,就

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

相关推荐

随机推荐