- cover-view评论弹幕自动滚动到底部的做法
在目前没有同层渲染的原生组件上加入文字、聊天、弹幕等就要用cover-view来解决了。 聊天每增加一条就自动滚动,上代码 此代码准确获取需要滚动的高度,解决苹果手机上的scroll-top过大导致溢出问题 <cover-view class=‘chat’ scroll-top="{{scrollTop}}" style=“bottom:105rpx;z-index:999999;{{!showbtn ? ‘display:none;’:‘display:block;’}}” bindtap=“hideshow”> <cover-view id=“bianjie”> <cover-view class=‘item’ wx:for="{{chatlist}}" wx:for-item=“record” wx:for-index=“recordid” wx:key=“index” > <cover-view class=‘name’>{{record.nickname}}</cover-view> <cover-view class=‘text’>{{record.content}}</cover-view> </cover-view> </cover-view> </cover-view> <button formType=“submit” class="btn-send ">发送</button> js中处理 //发送聊天 formSubmit: function (e) { //处理聊天内容 [代码]//设置scrollTop this.queryMultipleNodes(); [代码] }, // 获取节点信息并设置scrollTop queryMultipleNodes: function () { var query = wx.createSelectorQuery(), e = this; wx.createSelectorQuery().in(e).select(’.chat’).boundingClientRect(function (res) { e.setData({ chatbottom: res.bottom, }) }).exec() query.in(e).select(’#bianjie’).boundingClientRect(function (res) { if (res.bottom != undefined && res.bottom != ‘’ && res.bottom != null && typeof (res.bottom) != ‘undefined’) { //var setsbottom = Math.ceil(res.bottom) ; var setsbottom = setsbottom = Math.ceil(parseInt(res.bottom) - parseInt(e.data.chatbottom)); e.setData({ scrollTop: setsbottom }); } }).exec() }, 初次分享,献丑了,如有不对的地方请各位大神多多指正,谢谢(-)。
2019-03-08 - 在setData1024KB限制下如何做到无限翻页列表交互?
最近在做一个翻页交互,遇到点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限制,那也远远足够了,除了此种办法外,各位还有更好的办法么?欢迎共享经验
2018-05-25