中秋快乐，帮社区里的小伙伴写的选图效果，仿造的微信朋友圈选图，长按拖动排序主要是用交互监听来实现的。还有几个需要处理的地方。另外在真机上的动画速度总感觉快那么一丢丢。没做预览图，详情见代码片段咯。安卓机效果没试过。。 今天是9月23，这两天接受定制改动~ 第一次发经验分享。。轻点喷。。 哦，对了，这里 wx.createSelectorQuery 有个bug。。如果选择的基础库版本在2.0.9以上，第一次打开开发者工具，要先直接点一次编译，不然会出错。。真机上没问题 代码片段：wechatide://minicode/RFLmzDmL7I2a 有小伙伴反馈，在片段上面增加内容会乱位，是因为没计算顶部偏移量，方便懒人，完善了下 新的片段：wechatide://minicode/fOTEM3mI7l3B 终于拿到安卓机器试了，果然卡得很。。要控制频率。这很尴尬，太频繁的话，安卓会卡，太不频繁呢，刚开始移动那阵子会卡。。有同学反馈，说点快了会出问题，于是又加了点击频率的限制 现在的代码片段：wechatide://minicode/xBDdCom17R3c（要重新拿安卓机测试了再看看。。） 附上gif： [图片]

[图片] 以上代码逻辑为：监听一个scroll-view的滚动事件，滚动到一定程度时setData一次，不会有连续setData； 如果滚动的时候按住滚动，一段时间后才放开，打印出来的时间差会很大； 如果滚动的时候是滑动一点则放开，然后再次滑动，打印出来的时间差就会比较小； 以上问题只有在安卓机上会出现，估计是在滚动时，setData的渲染会延迟到本次滚动结束才会进行。 在写吸顶效果，返回顶部时经常会用到滚动事件监听，这个有办法解决吗？？ 官方人员看下，之前社区也好多关于吸顶的帖子，都是同样的问题，至今没找到解决方案。 2019.1.14补充： 问题已解决；解决方案： 在相应的页面配置的json文件中加入以下代码 [代码]{[代码] [代码]  [代码][代码]"usingComponents"[代码][代码]: {}[代码] [代码]}[代码] 至于为什么，可以参考 https://developers.weixin.qq.com/community/develop/doc/0006a6c1bc4aa88ebcd73fb7156400

最近在做一个翻页交互，遇到点setData的坑，最后想了个办法给绕过去了，但我不知道各位有没有更好的办法，在这里分享下我的处理办法； 例如我有个列表，这个列表的总数据量不确定有多少，经我们产品交代，大促期间，至少会有1000条，从小程序的开发文档里可以看到setData对数据的限制是1024KB，因为之前我看文档时没有注意到这一点，所以我一开始在做分页的时候就用了错误的方法，上代码: wxml: [代码] [代码] [代码]<[代码][代码]sku-item[代码] [代码]    [代码][代码]wx:for[代码][代码]=[代码][代码]"{{skuList}}"[代码][代码]    [代码][代码]skuData[代码][代码]=[代码][代码]"{{item}}"[代码][代码]    [代码][代码]actId[代码][代码]=[代码][代码]"{{actId}}"[代码][代码]    [代码][代码]wx:key[代码][代码]=[代码][代码]"{{item.skuid}}"[代码][代码]/>[代码] [代码] [代码] js: [代码] [代码] [代码]data: {[代码] [代码]    [代码][代码]skuList: [][代码][代码]},[代码][代码]loadMore: [代码][代码]function[代码][代码]() {[代码][代码]    [代码][代码]request([代码][代码]function[代码][代码](res) {[代码][代码]        [代码][代码]this[代码][代码].setData({[代码][代码]            [代码][代码]skuList: [代码][代码]this[代码][代码].data.skuList.concat(res.list)[代码][代码]        [代码][代码]});[代码][代码]    [代码][代码]})[代码][代码]}[代码] [代码] [代码] 好，这样写，问题就出来了，当数据量慢慢的累积起来，就会触发1024KB阈值，后面的数据就算能取回来，也set不进去了。 于是我想了一个解决方案： 把之前的渲染流程拆成两步来做，第1步: 先想办法把每页的坑位给渲染出来，于是我搞了一个skuPage组件, 在这个组件中来单独做每页的sku渲染： wxml: [代码] [代码] [代码]<[代码][代码]sku-item[代码] [代码]    [代码][代码]wx:for[代码][代码]=[代码][代码]"{{skuList}}"[代码][代码]    [代码][代码]skuData[代码][代码]=[代码][代码]"{{item}}"[代码][代码]    [代码][代码]actId[代码][代码]=[代码][代码]"{{actId}}"[代码][代码]    [代码][代码]wx:key[代码][代码]=[代码][代码]"{{item.skuid}}"[代码][代码]/>[代码] [代码] [代码] js: [代码] [代码] [代码]data: {[代码] [代码]    [代码][代码]skuList: [][代码][代码]},[代码][代码]methods: {[代码][代码]    [代码][代码]setListData: [代码][代码]function[代码] [代码]() {[代码][代码]        [代码][代码]let _this = [代码][代码]this[代码][代码];[代码][代码]        [代码][代码]this[代码][代码].setData({[代码][代码]            [代码][代码]skuList: app.globalData.skuList[代码][代码]        [代码][代码]});[代码][代码]        [代码][代码]app.globalData.skuList = [];[代码][代码]    [代码][代码]}[代码][代码]},[代码][代码]ready: [代码][代码]function[代码][代码]() {[代码][代码]    [代码][代码]this[代码][代码].setListData();[代码][代码]}[代码] [代码] [代码] 在外部页面中调用skuPage组件: wxml: [代码] [代码] [代码]<[代码][代码]sku-page[代码] [代码]    [代码][代码]class[代码][代码]=[代码][代码]"sku-page"[代码][代码]    [代码][代码]wx:for[代码][代码]=[代码][代码]"{{pageWrapCount}}"[代码][代码]    [代码][代码]wx:key[代码][代码]=[代码][代码]"{{index}}"[代码][代码]    [代码][代码]actId[代码][代码]=[代码][代码]"{{actId}}"[代码][代码]/>[代码] [代码] [代码] js: [代码] [代码] [代码]data: {[代码] [代码]    [代码][代码]pageWrapCount: [][代码][代码]},[代码][代码]loadMore: [代码][代码]function[代码][代码]() {[代码][代码]    [代码][代码]app.globalData.skuList = res.list;[代码][代码]    [代码][代码]request([代码][代码]function[代码][代码](res) {[代码][代码]        [代码][代码]this[代码][代码].setData({[代码][代码]            [代码][代码]pageWrapCount: [代码][代码]this[代码][代码].data.pageWrapCount.concat([1])[代码][代码]        [代码][代码]});[代码][代码]    [代码][代码]})[代码][代码]}[代码] [代码] [代码] 好，这样我们把取回的数据先不要立马set进去，而是把它先丢在global里，然后让坑位+1，这样skuPage就会新增一个，就会触发skuPage的ready钩子函数，这个时候再在skuPage的ready钩子中，从global中把list取过来丢给skuPage组件的skuList，让skuPage组件去渲染，这样就能绕开setData的1024KB上线，因为每次针对于坑位来说 [代码] [代码] [代码]this[代码][代码].setData({[代码] [代码]   [代码][代码]pageWrapCount: [代码][代码]this[代码][代码].data.pageWrapCount.concat([1])[代码][代码]});[代码] [代码] [代码] 我只对pageWrapCount数组push(1); 就算有1024KB限制，那也远远足够了，除了此种办法外，各位还有更好的办法么？欢迎共享经验

[图片] 请问这里的颜色怎么设置成白色的呢

[图片] 非自定义导航栏高度怎么计算？ 自定义导航栏高度由谁决定？ 小程序自定义导航栏开发注意点与参考文档 一、默认导航栏高度怎么计算？（非custom情况下获取） wx.getSystemInfo 和 wx.getSystemInfoSync 获取机器信息 screenHeight - windowHeight   计算标题栏高度 [代码]{[代码][代码]       [代码][代码]'iPhone'[代码][代码]: 64,[代码][代码]       [代码][代码]'iPhone X'[代码][代码]: 88,[代码][代码]       [代码][代码]'android'[代码][代码]: 68[代码][代码] [代码][代码]}[代码]不完全统计（ip6 , ip5 , ip6p , ipx , 小米mix2  , 小米5等综合了开发工具提供的数据和真机数据）所得 二、自定义导航栏高度由谁决定？（自定义情况下，屏幕高度和窗口高度没有差别，所以要通过步骤1先获取数据，预定义到代码中） 开发时发现，自定义导航栏的实现需要 包含状态栏+胶囊 ：没有自定义导航栏的时候页面是全屏幕滚动会出现在状态栏的下一层 根据上一标题中步骤1的函数，可以获得状态栏高度 statusBarHeight demo，点击打开小程序开发工具 三、小程序自定义导航栏开发注意点与参考文档 微信官方设计指导中关于胶囊按钮的描述 由此得知胶囊宽度87pt=116px，设置之后，的确能产生较好的兼容性效果 社区Q&A：自定义标题栏高度计算、在 navigationStyle: 'custom',苹果X和8兼容问题 注意某些方法、参数的兼容性，时刻关注官方更新信息 开一个项目采集设备的screenHeight,windowHeight,pixelRatio等信息到一个数据库中，或者微信可以提供这样一个数据库便于计算，亦或者微信优化自定义标题栏（譬如通知栏可以改变颜色但不要算在自定义范围内，给出胶囊宽高到通知栏距离到右侧屏幕边框距离等相关参数）