【wx小程序】扩展组件recycle-view的使用
2024-06-23 10:43:22
一、components文件夹中，加入对应的组件包
二、页面配置
1、json：“usingComponents”: {}
"recycle-view": "/components/miniprogram-recycle-view/recycle-view",
"recycle-item": "/components/miniprogram-recycle-view/recycle-item"
2、js:
// 必须使用相对路径表示，否则会报错
const createRecycleContext = require('../../../components/miniprogram-recycle-view/index.js')
const imgUrlList = ['http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEV5QjxLDJaL6ibHLSZ02TIcve0ocPXrdTVqGGbqAmh5Mw9V7504dlEiatSvnyibibHCrVQO2GEYsJicPA/0?wx_fmt=jpeg','http://mmbiz.qpic.cn/sz_mmbiz_png/GEWVeJPFkSHALb0g5rCc4Jf5IqDfdwhWJ43I1IvriaV5uFr9fLAuv3uxHR7DQstbIxhNXFoQEcxGzWwzQUDBd6Q/0?wx_fmt=png','http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGqys4ibO2a8L9nnIgH0ibjNXfbicNbZQQYfxxUpmicQglAEYQ2btVXjOhY9gRtSTCxKvAlKFek7sRUFA/0?wx_fmt=jpeg','http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSH2Eic4Lt0HkZeEN08pWXTticVRgyNGgBVHMJwMtRhmB0hE4m4alSuwsBk3uBBOhdCr91bZlSFbYhFg/0?wx_fmt=jpeg','http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg','http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSFrhQolODuh9lGqFKoicqKGxweRdS2zzibxicBMYkTic4WCJrbBNqoMchCWf02UbOvMBI6d32TAKFuqTQ/0?wx_fmt=jpeg','http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T0MfAGwtAs4jz0vTC0PHJEv2UErsjBhNDNujSwLhy7icf0DjDe7BYSIFkwqpMbekcwKDBic0ygBoFtw/0?wx_fmt=jpeg','http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGrMuuicv6QLQAe74FH1KrGUOq8VMe3Ya63tiaqaMNQibvB4T3SLoEWV3WrMvlySd3NXRXJGG75LAtjA/0?wx_fmt=jpeg','http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEQF22uXNecrTYIrCsEwo9Zolu6XnibTXNaZ1c19RozKjLqmR4oWl3DZhpLcDzwmtMOmIOuNuricrNA/0?wx_fmt=jpeg','http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEQF22uXNecrTYIrCsEwo9ZhibT6gPEoZfiaRGy9w9QyWB2vtOkxYUJPcEjePQTrVYpRF0PqicC4EEvw/0?wx_fmt=jpeg'
]// 单位转换：
const rpx2px = (rpx) => (rpx / 750) * wx.getSystemInfoSync().windowWidth
const px2rpx = (px) => (px / wx.getSystemInfoSync().windowWidth) * 750Page({data: {rheight:0,rwidth:0,urls5: ['https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-1.jpg?sign=ff17b6597c5659186d54469e6122d153&t=1590025404','https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-2.jpg?sign=7ccd10f793df154311f15a7b15d9ba57&t=1590025418','https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-3.jpg?sign=d71bb290f896e14bb800d0fb807f6764&t=1590025427','https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-4.jpg?sign=37d3fc32fe841a137e56b54cec2807c8&t=1590025434','https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-5.jpg?sign=785abbd12c4fa70454ef4bd7c3961536&t=1590025441','https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-2.jpg?sign=7ccd10f793df154311f15a7b15d9ba57&t=1590025418','https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-3.jpg?sign=d71bb290f896e14bb800d0fb807f6764&t=1590025427','https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-4.jpg?sign=37d3fc32fe841a137e56b54cec2807c8&t=1590025434','https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-5.jpg?sign=785abbd12c4fa70454ef4bd7c3961536&t=1590025441','https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-2.jpg?sign=7ccd10f793df154311f15a7b15d9ba57&t=1590025418','https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-3.jpg?sign=d71bb290f896e14bb800d0fb807f6764&t=1590025427','https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-4.jpg?sign=37d3fc32fe841a137e56b54cec2807c8&t=1590025434','https://656e-env-9eb476-1258886794.tcb.qcloud.la/images/album/photo-5.jpg?sign=785abbd12c4fa70454ef4bd7c3961536&t=1590025441'],},,onLoad() {//构造const ctx = createRecycleContext({id: 'recycleId',//对应 recycle-view 的 id 属性的值dataKey: 'recycleList',//对应 recycle-item 的 wx:for 属性设置的绑定变量名page: this,//recycle-view 所在的页面或者组件的实例，页面或者组件内可以直接传 thisitemSize: /*{此参数用来生成recycle-item的宽和高，前面提到过，要知道当前需要渲染哪些item，必须知道item的宽高才能进行计算Object必须包含{width, height}两个属性，Function的话接收item, index这2个参数，返回一个包含{width, height}的ObjectitemSize如果是函数，函数里面this指向RecycleContext如果样式使用了rpx，可以通过transformRpx来转化为px。为Object类型的时候，还有另外一种用法，详细情况见下面的itemSize章节的介绍。*/// recycle-item的宽高必须和itemSize设置的宽高一致，否则会出现跳动的bug。// height: rpx2px(600),// width: rpx2px(750)this.itemSizeFunc//使用函数的方式设置每个item的宽高// }})/*1、append ——list, callback 在当前的长列表数据上追加list数据，callback是渲染完成的回调函数2、splice ——begin, count, list, callback 插入/删除长列表数据，参数同Array的splice函数，callback是渲染完成的回调函数3、update ——begin, list, callback 更新长列表的数据，从索引参数begin开始，更新为参数list，参数callback同splice。4、destroy ——无 销毁RecycleContext对象，在recycle-view销毁的时候调用此方法5、forceUpdate ——callback, reinitSlot 重新渲染recycle-view。callback是渲染完成的回调函数，当before和after这2个slot的高度发生变化时候调用此函数，reinitSlot设置为true。当item的宽高发生变化的时候也需要调用此方法。6、getBoundingClientRect ——index 获取某个数据项的在长列表中的位置，返回{left, top, width, height}的Object。7、getScrollTop ——无 获取长列表的当前的滚动位置。8、transformRpx ——rpx 将rpx转化为px，返回转化后的px整数。itemSize返回的宽高单位是px，可以在这里调用此函数将rpx转化为px，参数是Number，例如ctx.transformRpx(140)，返回70。注意，transformRpx会进行四舍五入，所以transformRpx(20) + transformRpx(90)不一定等于transformRpx(110)9、getViewportItems ——inViewportPx 获取在视窗内的数据项，用于判断某个项是否出现在视窗内。用于曝光数据上报，菜品和类别的联动效果实现。参数inViewportPx表示距离屏幕多少像素为出现在屏幕内，可以为负值。10、getList ——无 获取到完整的数据列表*/ ctx.append(urls5)//需要便利的数组},//自定义每个item的宽高...itemSizeFunc: function (item, index) {// console.log("item:",item)return {height: rpx2px(600),width: rpx2px(750)}}，//扩展内容：获取屏幕高度（单位转化为rpx）this.setData({rheight:px2rpx(wx.getSystemInfoSync().windowWidth)*wx.getSystemInfoSync().windowHeight/wx.getSystemInfoSync().windowWidth,rwidth: px2rpx(wx.getSystemInfoSync().windowWidth),logs: (wx.getStorageSync('logs') || []).map(log => {return {date: util.formatTime(new Date(log)),timeStamp: log}})})console.log("h====="+this.data.rheight+","+this.data.rwidth)
})3、wxml:
<recycle-view batch="{{batchSetRecycleData}}" id="recycleId" hidden="{{hide0}}"><!-- 循环渲染： --><recycle-item wx:for="{{recycleList}}" wx:key="id" class="item">每个子项的view写在这。。。</recycle-item><!-- <view slot="after" style="text-align: center">最下面的标题</view> -->
</recycle-view>
【wx小程序】扩展组件recycle-view的使用相关推荐
- 【微信小程序】组件使用及属性参考
文章目录 3.1 视图容器组件 3.1.1 视图容器view 3.1.2 滚动视图scroll-view 3.1.3 可移动视图movable-view 3.1.4 覆盖视图 3.1.5 滑块视图sw ...
- 微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照-后端为nodejs
在本文 微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照之前需要看看 微信小程序-获取用户session_key,openid,unionid - 后端为nodej ...
- 小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...
如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...
- app vue 真机运行_uni-app黑魔法：小程序自定义组件运行到H5平台
引言 移动互联网的初期,囿于设备硬件性能限制,流量以原生App为主,iOS.Android是当时两大平台. 随着硬件及OS的更新换代,H5可承载的体验逐步完善,为提高开发效率.节约资源(复用代码)以及 ...
- 微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
- 手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件 微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图 由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
- 微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注 为何存在组件 组件间的关系 使用rel ...
- 小程序webview组件实践
本文转载自:https://mp.weixin.qq.com/s/DOHn3VEuNGCjmEsqCr9VeQ 今天主要来跟大家分享小程序webview方面的问题,但我并不会讲小程序的webview原 ...
- 微信小程序 常用组件
欢迎体验个人小程序 表情小作坊 轻松定制表情包 三连图 文字转图片 吃什么都行 解决广大用户吃饭选择恐惧症的问题 微信小程序的组件也挺多了,还是把官网的组件介绍地址先贴出来吧 https://mp.w ...
- wx小程序笔记（2）
wx小程序笔记 第三章:常用组件 第一节:scroll-view组件 view: scroll-view: 设置横向滚动: 设置竖向滚动: scrolltoupper和scrolltolower事件: ...
最新文章
- Android中资源文件夹res/raw和assets的使用
- oral_quiz-#求链表中的倒数第K个结点#
- STM32H7的Cache和MPU
- 阿杜版主 我找您有事想请教下您！！
- Javascript数组操作方法
- 线程通信wait与notify
- Fabricjs对Canvas画布和对象的事件监听
- Intellij idea requested without authorization请求页面未经授...
- “根本就不需要 Kafka 这样的大型分布式系统！”
- 485通讯线是几芯的_小令老师说门禁| 为什么485门禁必然会取代韦根？
- 执行php程序的时候，报错Allowed memory size of 134217728 bytes exhausted (tried to allocate 83 bytes)...
- 网站和搜索引擎是分工协作的伙伴关系
- arduino无源蜂鸣器歌曲编码_Arduino 蜂鸣器音乐代码转化程序开发
- UTF-8 汉字编码与其16进制对照
- c语言实现作业调度先来先服务和短进程优先,先来先服务和高响应比优先调度算法C语言实现...
- labview—电子表格文件读写
- nanopi 2 fire s5p4418 初次体验 (1)uboot,linux kernel编译
- 计算机网络谢希仁（1）
- 字母对应的日期 moment Element JAVA oracle mysql的日期格式
- 程序异常终止：Process finished with exit code -1073741819 (0xC0000005)