一般在列表页面 会先加载一定数量的数据 触发上拉加载这个动作的时候再陆续加载数据 假如上拉一次加载10条数据 在小程序中 你快速滑动页面触发加载这个事件的话 你会发现小程序卡着不动了 刚开始以为数据加载完了 仔细研究发现 快速滑动页面的时候 有时候是不会触发onReachBottom这个事件的 只要一次不触发 就必须下拉刷新过后才能再触发该事件 网上搜集资料后发现: 小程序的 onReachBottom 事件不能在350ms之内频繁触发 也就是说它有350ms的频率限制 我自认为目前最好的解决方

data: { pageNo: 1,//当前页 pageSize: 10,//每页条数 count:'',//总条数 orderList: [], }, onLoad: function () { var that = this; var data = `${that.data.type}/${that.data.pageSize}/${that.data.pageNo}`; that.getOrderList(data); }, //订单列表 getOrderList(data) { var

接上文:一套代码小程序&Web&Native运行的探索04——数据更新 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/mvvm 参考: https://github.com/fastCreator/MVVM(极度参考,十分感谢该作者,直接看Vue会比较吃力的,但是看完这个作者的代码便会轻易很多,可惜这个作者没有对应博客说明,不然就爽了) https://www.tangshuang.net/3756.html ht

接上文:一套代码小程序&Web&Native运行的探索03 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/mvvm 参考: https://github.com/fastCreator/MVVM(极度参考,十分感谢该作者,直接看Vue会比较吃力的,但是看完这个作者的代码便会轻易很多,可惜这个作者没有对应博客说明,不然就爽了) https://www.tangshuang.net/3756.html https://

接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱 参考: https://github.com/fastCreator/MVVM https://www.tangshuang.net/3756.html https://www.cnblogs.com/kidney/p/8018226.html 经过之前的学习,发现Vue其实与小程序框架相识度比较高,业内也有mpvue这种还比较成熟的方案了,我们这边依旧不

微信小程序 web 端实时运行工具 https://chemzqm.github.io/wept/

接上文:一套代码小程序&Web&Native运行的探索05——snabbdom 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/mvvm 参考: https://github.com/fastCreator/MVVM(极度参考,十分感谢该作者,直接看Vue会比较吃力的,但是看完这个作者的代码便会轻易很多,可惜这个作者没有对应博客说明,不然就爽了) https://www.tangshuang.net/3756.htm

接上文:一套代码小程序&Web&Native运行的探索02 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/mvvm 我们在研究如果小程序在多端运行的时候,基本在前端框架这块陷入了困境,因为市面上没有框架可以直接拿来用,而Vue的相识度比较高,而且口碑很好,我们便接着这个机会同步学习Vue也解决我们的问题,我们看看这个系列结束后,会不会离目标进一点,后续如果实现后会重新整理系列文章...... 参考: https:/

前言 接上文:[一套代码小程序&Native&Web阶段总结篇]可以这样阅读Vue源码 最近工作比较忙,加之上个月生了小孩,小情人是各种折腾他爸妈,我们可以使用的独立时间片不多,虽然这块研究进展缓慢,但是一直做下去,肯定还是会有一些收获的 之前我们这个课题研究一直是做独立的研究,没有去看已有的解决方案,这个是为了保证一个自己独立的思维,无论独立的思维还是人格都是很重要的东西,然独学而无友则孤陋而寡闻,稍微有点自己的东西后,还是应该看看外面已有的东西了,今天的目标是mpvue,我们来看看其官

1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubmit="bindMobile"> <view class="form_group"> <text>手 机:</text> <input type="number" placeholder="请

代码: //页面上拉触底事件的处理函数 onReachBottom(e) { console.log("底部")// 滚动到页面执行 该 方法 wx.showToast({ title: '加载中...', icon: 'loading', duration: }) /* 这里执行你需要的请求数据追加到循环数组就好了 */ }, onPageScroll(e) { console.log(e) //滚动条 滚动的位置(e.scrollTop)从头部开始计算 }, 原理: 上拉加载更多这

weweb是一个兼容小程序语法的前端框架,你可以用小程序的写法,来写web单面应用.如果你已经有小程序了,通过它你可以将你的小程序运行在浏览器中.在小程序大行其道的今天,它可以让你的小程序代码得到最大限度的发挥,他具有以下优点: 跨平台,一套代码多端运行(小程序.h5.未来直接打包成安卓.ios app也不是梦) 自带常用组件,完美继承了小程序内置组件 兼容小程序rpx语法,使页面更容易适配各种机型 该项目基于小程序开发者工具内置的小程序运行框架来实现的,我们在仔细研究了小程序官方的底层框架后,

wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width height = rect.height top = rect.top }).exec() 如上,拿到了id为box的view,并获取到了它的宽.高等属性,此段代码要放在onReady函数中 注意:如果这个view的宽高是随着内容而变化的话,这样获取到的宽高就有可能还是渲染完成前的值,不知是不是小程序自己的

前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 并且用小程序翻写了之前一个demo:[组件化开发]前端进阶篇之如何编写可维护可升级的代码 之前一直在跟业务方打交道后面研究了下后端,期间还做了一些运营.管理相关工作,哈哈,最近一年工作经历十分丰富啊,生命在于不断的尝试嘛. 当然,不可避免的在前端技术一块也稍微有点落后,对React&Vue没有进行过深入一点的研究,这里得空我们便来一起研究一番(回想起来写代码的日子才是最快乐的

1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;"> ......</view> 2.底端固定核心代码如下: <!-- 底部固定 --><view class="page__hd" style="position:fixed; bottom:0;width: 750rpx;"

效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平拖动新闻--> <scroll-view scroll-x class="menu"> <view class="scroll-nav"> <navigator url="">社会新闻</navigat

问题图: 解决方法: // app.js App({   isIphoneX() {     let isIphoneX = false     wx.getSystemInfo({       success: function(res) {         isIphoneX = (res.model.indexOf('iPhone X') !== -1)       }     })     return isIphoneX   } })   // tab-bar.js, 需要适配的页面

页面wxml <!--page/index/index.wxml--> <view id='demo'> <text>哈哈哈哈哈</text> <view>哈哈哈哈哈</view> </view> js文件 onLoad: function(options) { //创建节点选择器 var query = wx.createSelectorQuery(); //选择id query.select('#demo').boun

一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750)  ][ px换算rpx (750/屏幕宽度)] App({ onLaunch: function() { wx.getSystemInfo({ success: res => { this.globalData.systemInfo = res this.globalData.windowHeight =

hover:class  :定义容器在被触发时的样式 通常无用,但若不去除则影响用户体验: 为避免被覆盖,约定在wxss底部添加class,比如: <!-- wxml --> <navigator class="index-nav_box" hover-class="noshadow"> <image></image> <view class="index-nav-des">现采蓝莓1斤

1.下载工具链接:http://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715 2.安装完成后图片样式如图: 3.新建项目  说明:选择目录的时候尽量新建微信独立的工作空间[个人习惯] 4.打开项目效果图如下