第一步,在组件里编写弹窗的代码 <!-- 活动类型弹框 --> <view class='bottomModel' wx:if="{{modelFlag}}" catchtouchmove="toCatch"></view> <view class='fixedModel' wx:if="{{modelFlag}}" animation='{{animationData}}'> <view c

图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. tabBar的基本属性 tabBar的list属性 tabBar的list属性介绍 参考代码 注意事项 list :接受一个数组,只能配置最少 2 个.最多 5 个 tab.tab 按数组的顺序排序,每个项都是一

微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动手写一个和微信小程序提供的tabbar相同的效果,而且还可以满足灵活配置的功能.有参照有赞小程序 效果: 效果A: 2.效果B: 实现:              项目结构如下:                     II 效果A实现: 1>wxml的代码: Page({ data: { bloc

一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tabbar的情况下自制 tabbar 的方法.并说说这几种方法各自的特色. 类 navigator 跳转方式 类 navigator 跳转方式是我自己起的名称,因为它的实现思路就是这个样子的.期初参考 微信小程序自定义tabBar组件开发 这篇博文的思路.进行了这种方式的尝试,并为后续提供了解决思路.在

知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了. 第一步:创建组件所需的文件 我喜欢把共用的内容都放在和pages文件同级的地方,所以有了下面的目录结构 (1) 先创建一个自定义名字的文件夹,例如我上面的Componet (2) 再创建一个select文件夹,然后:右键这个文件

最近在研究小程序的时候,遇到了一个问题,就是tabbar切卡,在android上有fragment,在RN上也有提供一个第三方的组件来用,微信小程序,好像没有专门的一个组件来实现这个功能,度娘了大半天,虽然也有好多人实现过这样的功能,但是我发现要么是不符合我的需求,那么就是实现起来过于繁琐.于是我参考多个高手写的博客,实现出了一个符合自己需求的.先上代码. 先看js文件: const util = require('../../utils/util.js'); Page({ data: { na

微信小程序中经常遇到的需求就是我提交了一个表单或者进行了一个操作,需要在我的个人中心页面中实时显示出来,但是小程序中的tabbar切换类似于tab切换 并不会进行页面刷新请求 所以总是会造成一些数据更新不及时问题 而阅读小程序文档发现了小程序是给提供了解决办法的 onShow /** * 生命周期函数--监听页面显示 */ onShow: function () { }, 这个方法在页面进行显示的时候就会重新执行一次,所以我想到的解决方案就是将需要进行实时更新的数据进行封装方法 getreloa

微信小程序使用模板消息需要使用表单提交 formId,因此进行了简单的代码测试,在 wxml 文件中创建 form 对象,并在 form 标签中声明属性 report-submit="true" . wxml 代码如下: <form name='sendMessageTest' report-submit='true' bindsubmit='getFormId'> <button form-type="submit">获取formId<

微信小程序删除处理 没有 confrim 那怎么实现这个效果呢 可以使用小程序里的模态框 代码: wx.showModal({ title: '提示', content: '确定要删除吗?', success: function (sm) { if (sm.confirm) { // 用户点击了确定 可以调用删除方法了 } else if (sm.cancel) { console.log('用户点击取消') } } }) 微信小程序操作成功提示后跳转 wx.showToast({ title:

在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. Tip: 当设置 position 为 top 时,将不会显示 icon tabBar 中的 list 是一个数组,只能配置最少2个.最多5个 tab,tab 按数组的顺序排序. 在实际开发过程中,小程序自带的tabbar样式并不能满足设计提供的开发需求,所以需要我们自

项目中需要根据用户角色控制TabBar中各Item的显示和隐藏,然而小程序自带TabBar没有提供隐藏某个item的功能,只好自己动手写了一个. 1.wxml文件 <view class="weui-flex tab-bar" style="color: {{color}}; background: {{backgroundColor}}; {{position=='top'? 'top: 0' : 'bottom: 0'}}; {{borderStyle? (posi

如图,当小程序发布新的版本后,用户如果之前访问过该小程序,通过已打开的小程序进入(未手动删除),则会弹出这个提示,提醒用户更新新的版本.用户点击确定就可以自动重启更新,点击取消则关闭弹窗,不再更新. 官方给的示例代码: const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 console.log(res.hasUpdate) }) upd

tabBar不显示 在app.json中配置了4个页面,在tabBar的list中随意写了两个页面,编译后发现不能显示tabBar. { "pages": [ "pages/musicList/musicList", "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window": { "backgro

个人感觉小程序的tab样式自定义的能力有所欠缺,不够美观,于是今天自己diy了一个tab 测试的时候发现,无论是使用navigator跳转(会出现点击的效果)还是用bindtap(触摸),因为没有定义tabbar, 跳转的方式都只能是页面重定向的,导致tab页上的ABCD互相跳转的时候,每次都会重新渲染视图,由此带来的 视觉效果很不好,没有系统tabbar跳转地自然,万般无奈之下,只好用回系统自带的tabbar. 如果你有好的方法能够解决自定义tabbar跳转重新渲染的问题,烦请告知,在此谢过!

在小程序开发中,我们通常会遇到这样的需求:提交某个表单成功后跳转该表单详情页面,但是返回时需要跳转回到首页(注意:我这里的首页是提交表单页的前一个页面),而不能再返回提交表单的页面,并且要在首页中刷新刚刚提交的数据 1. 这首先要求我们在提交成功跳转时,使用redirectTo的方式,不保留当前页面 2. 然后需要在当前页面上获取到首页并调用首页的刷新方法 如下图,prePage为首页,refresh()为首页中刷新数据的方法

从底部向上滑出的动画效果: 用到了小程序的触摸事件bindtouchmove,以及创建一个annimation对象,完成动画操作之后使用animation这个对象的export()方法导出动画数据. 为了阻止多次向上向下滑动,出现多次动画效果,需要增加 ifStop 来判断. 根据 e.touches[0].clientY 的对比,显示相应的动画效果.    <!--logs.wxml--> <view class="box-out" bindtouchstart='

1.项目目录 2.在app.json里填写:tab个数范围2-5个 app.json { "pages": [ "pages/index/index", "pages/audiobook/audiobook", "pages/broadcast/broadcast", "pages/group/group", "pages/mine/mine" ], "window"

底部导航(要在app.js里面配置,也就是把导航的代码写到app.js) 官方文档说最少2个导航最多5个 , "tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "black", "list": [ { "selectedIconPath&q

嫌长版本: var rpx = 10000; var systemInfo = wx.getSystemInfoSync(); var px = rpx / 750 * systemInfo.windowWidth; -------------------  ------------------- 详解版: 分割线  -------------------  ------------------- 先理解两个概念. 分辨率有两种. [物理分辨率 rpx(responsive pixel)]即 手

当wx.navigateTo跳转链接跟app.json中设置的tabbar中跳转链接一样时,wx.navigateTo就不能跳转可以改为wx.switchTab 1.当app.json中设置了tabbar跳转时2.普通跳转wx.navigateTo不起作用,要换成是wx.switchTab .

最近在做个直播间,有个这样的需要,就是进入到页面,<scroll-view>需要滚动到最底部,并且发送消息之后自动的滚动到底部. 开始想着计算里面内容的高度,然后通过设置 scroll-top 的值,达到这个效果.在网上搜一圈,大多也是采取的这种方案.但是感觉这个方案略麻烦.想另寻一条解决方案. 后面看官方文档有个scroll-into-view的属性,如下图: 想着,滚动到底部不就是滚动到最后一条数据嘛~遍历数据的时候给每条数据添加一个id,设置scroll-into-view的值为最后一条