快递100“快递跟踪”微信小程序插件上线啦！ 帮助所有小程序解决快递物流查询问题，现面向所有第三方小程序、小程序开发服务商（包括个体小程序）免费开放。 [图片] 点链接→https://fuwu.weixin.qq.com/service/detail/00008caeab84c07c17dcdabf55b815，立即添加插件（添加时请从电脑端打开链接） 公开数据显示，今年上半年微信小程序数量已超过430万。 随着小程序生态不断发展，越来越多商家和开发者在小程序上建立自有商城。大到京东这样的巨型平台，小到一个公众号、博主自己开的店铺，用户都可以在小程序上下单。业务逐渐壮大后，物流却成为困扰不少商家和开发者的一大难题。 [图片] 大平台有大量的资金和人力来调配资源，自主开发接入物流公司系统，给顾客及时物流反馈；而对于那些中小店铺的小程序商家们来说，没有足够人力、财力支撑，无法自主开发接入。 近日，中国领先的快递物流信息服务商快递100宣布，正式上线“快递跟踪”小程序功能插件，开放快递物流信息查询模块，允许第三方小程序 免费 接入。 “快递跟踪”小程序插件整合了快递100快递查询能力，支持全球1000+快递物流公司信息查询，对全行业的小程序免费开放接入，包括电商平台、商家、医药寄送、信息查询或本地生活服务平台等 任何有物流查询需求的小程序开发者，为企业、商家、个体小程序赋能。 点链接→https://fuwu.weixin.qq.com/service/detail/00008caeab84c07c17dcdabf55b815，立即添加插件 01 无门槛免费接入 无论是电商商城，还是社群团购、回收类等任何有涉及快递物流环节的小程序，物流信息查询是必须重视的一项服务。卖家是否能提供及时的物流信息更新服务，会影响到用户的二次购买决策。 “快递跟踪”小程序插件，是免费接入。接入插件后，用户只要在小程序内点击快递单号，就可以查看最新物流信息，有效提升用户的购物体验，提高小程序的回访率和复购转化率。 [图片] 02 原生体验，无第三方跳转 快递100“快递跟踪”插件依托微信小程序生态，第三方小程序接入后无需任何跳转，在自己的小程序内即可直接查看物流信息，简化用户操作流程。 [图片] 接入方式也非常简单快捷，模板化快速接入，无需再次开发，几个小时即可完成接入，大大降低开发和运营成本。 快递100“快递跟踪”插件开放接入，不仅能够帮助小程序开发者降低物流服务的开发门槛和成本，同时也为小程序商家提供了更好服务用户的方式。 03 支持国内外1000+家快递公司物流查询 通过快递100“快递跟踪”小程序插件，支持全网快递物流查询，可查看国内、国际1000+快递物流公司的信息，同时还提供官方客服热线。 “快递跟踪”插件服务稳定，让商家、开发者管理更加方便。 除了常见的电商场景，“快递跟踪”插件同样非常适合有特定物品物流信息查询需求的机构和企业接入 —— 例如医院类公众号，病历档案预约寄出后的进度查询；驾校机构，寄出驾照后的进度查询；校园机构的报到证、档案等资料的快递查询等。 点链接→https://fuwu.weixin.qq.com/service/detail/00008caeab84c07c17dcdabf55b815，立即添加插件 另外，快递100也可提供快递信息推送、实时快递、地图轨迹API等服务，点这里→https://api.kuaidi100.com/ 了解详情 快递100是中国领先的快递物流信息服务商，国家高新技术企业、新基建代表企业。 快递100目前拥有个人注册用户1.6亿，企业客户60万+，日均查询量3亿次，是国内查询量最大的快递物流信息查询平台；年寄件量超8亿单，寄件功能官方合作京东、邮政、德邦、圆通、韵达、DHL、TNT、UPS等多家国内外快递公司。 快递100致力构建中国最大的物流信息服务枢纽，始终秉承开放态度与快递行业共创共赢，为用户、商家、企业提供专业、可靠的服务，实现互联互通互动。 点链接→https://fuwu.weixin.qq.com/service/detail/00008caeab84c07c17dcdabf55b815，立即添加插件

由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有小程序码的图片，然后引导用户下载图片到本地后再分享到朋友圈。相信大家在绘制分享图中应该踩到 Canvas 的各种（坑）彩dan了吧～ 这里首先推荐一个开源的组件：painter（通过该组件目前我们已经成功在支付宝小程序上也应用上了分享图功能） 咱们不多说，直接上手就是干。 [图片] 首先我们新增一个自定义组件，在该组件的json中引入painter [代码]{ "component": true, "usingComponents": { "painter": "/painter/painter" } } [代码] 然后组件的WXML (代码片段在最后) [代码]// 将该组件定位在屏幕之外，用户查看不到。 <painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" /> [代码] 重点来了 JS (代码片段在最后) [代码]Component({ properties: { // 是否开始绘图 isCanDraw: { type: Boolean, value: false, observer(newVal) { newVal && this.handleStartDrawImg() } }, // 用户头像昵称信息 userInfo: { type: Object, value: { avatarUrl: '', nickName: '' } } }, data: { imgDraw: {}, // 绘制图片的大对象 sharePath: '' // 生成的分享图 }, methods: { handleStartDrawImg() { wx.showLoading({ title: '生成中' }) this.setData({ imgDraw: { width: '750rpx', height: '1334rpx', background: 'https://qiniu-image.qtshe.com/20190506share-bg.png', views: [ { type: 'image', url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg', css: { top: '32rpx', left: '30rpx', right: '32rpx', width: '688rpx', height: '420rpx', borderRadius: '16rpx' }, }, { type: 'image', url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png', css: { top: '404rpx', left: '328rpx', width: '96rpx', height: '96rpx', borderWidth: '6rpx', borderColor: '#FFF', borderRadius: '96rpx' } }, { type: 'text', text: this.data.userInfo.nickName || '青团子', css: { top: '532rpx', fontSize: '28rpx', left: '375rpx', align: 'center', color: '#3c3c3c' } }, { type: 'text', text: `邀请您参与助力活动`, css: { top: '576rpx', left: '375rpx', align: 'center', fontSize: '28rpx', color: '#3c3c3c' } }, { type: 'text', text: `宇宙最萌蓝牙耳机测评员`, css: { top: '644rpx', left: '375rpx', maxLines: 1, align: 'center', fontWeight: 'bold', fontSize: '44rpx', color: '#3c3c3c' } }, { type: 'image', url: 'https://qiniu-image.qtshe.com/20190605index.jpg', css: { top: '834rpx', left: '470rpx', width: '200rpx', height: '200rpx' } } ] } }) }, onImgErr(e) { wx.hideLoading() wx.showToast({ title: '生成分享图失败，请刷新页面重试' }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') }, onImgOK(e) { wx.hideLoading() // 展示分享图 wx.showShareImageMenu({ path: e.detail.path, fail: err => { console.log(err) } }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') } } }) [代码] 那么我们该如何引用呢？ 首先json里引用我们封装好的组件share-box [代码]{ "usingComponents": { "share-box": "/components/shareBox/index" } } [代码] 以下示例为获取用户头像昵称后再生成图。 [代码]<button class="intro" bindtap="getUserInfo">点我生成分享图</button> <share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}" bind:initData="handleClose" /> [代码] 调用的地方： [代码]const app = getApp() Page({ data: { isCanDraw: false }, // 组件内部关掉或者绘制完成需重置状态 handleClose() { this.setData({ isCanDraw: !this.data.isCanDraw }) }, getUserInfo(e) { wx.getUserProfile({ desc: "获取您的头像昵称信息", success: res => { const { userInfo = {} } = res this.setData({ userInfo, isCanDraw: true // 开始绘制海报图 }) }, fail: err => { console.log(err) } }) } }) [代码] 最后绘制分享图的自定义组件就完成啦~效果图如下： [图片] tips： 文字居中实现可以看下代码片段 文字换行实现（maxLines）只需要设置宽度，maxLines如果设置为1，那么超出一行将会展示为省略号 代码片段：https://developers.weixin.qq.com/s/J38pKsmK7Qw5 附上painter可视化编辑代码工具：点我直达，因为涉及网络图片，代码片段设置不了downloadFile合法域名，建议真机开启调试模式，开发者工具 详情里开启不校验合法域名进行代码片段的运行查看。 最后看下面大家评论问的较多的问题：downLoadFile合法域名在小程序后台 开发>开发设置里配置，域名为你图片的域名前缀 比如我文章里的图https://qiniu-image.qtshe.com/20190605index.jpg。配置域名时填写https://qiniu-image.qtshe.com即可。如果你图片cdn地址为https://aaa.com/xxx.png, 那你就配置https://aaa.com即可。

小程序版本更新了，但是用户的小程序版本可能还是老版本，怎么才能最大限度地保证版本及时更新，又能不影响用户体验？ 我们的办法是自动更新和手动更新并存。 方案如下： app.js中的自动更新： update: function () { let um = wx.getUpdateManager() um.onCheckForUpdate(res => res.hasUpdate && um.onUpdateReady(() => um.applyUpdate())) }, 在小程序的某页中，手动更新： [图片] mine.js中的代码： upgrade: function () { wx.showToast({ title: '正在更新版本...', icon: 'loading' }) const um = wx.getUpdateManager() um.onCheckForUpdate(function (res) { if (res.hasUpdate) { um.onUpdateReady(function () { um.applyUpdate() wx.showToast({ title: '更新完成', }) }) } else { wx.showToast({ title: '已是最新版本', }) } }) }, 这样，既可以自动更新，如果实在某些用户没有及时更新，过来投诉，引导他们手动更新一下版本，用户体验没毛病。

列表页数据量过大页面渲染节点过多会触发Dom limit exceeded . 解决方案如下。 欢迎讨论交流 [代码]// index.js[代码] [代码]Page({[代码][代码]  [代码][代码]data: {[代码][代码]    [代码][代码]currentPage: 0,[代码][代码]    [代码][代码]pageFrame:[][代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]pageSize: 10,[代码][代码]  [代码][代码]currentPage:0,[代码][代码]  [代码][代码]onLoad: [代码][代码]function[代码] [代码]() {[代码] [代码]      //mock 一些数据[代码] [代码]      [代码][代码]var[代码] [代码]list = [];[代码][代码]      [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]i = 0; i< 10000 ; i++) {[代码][代码]        [代码][代码]list.push({[代码][代码]          [代码][代码]name: [代码][代码]'ssss----'[代码] [代码]+ i,[代码][代码]          [代码][代码]desc: [代码][代码]'aaaaa----'[代码] [代码]+ i,[代码][代码]          [代码][代码]content: [代码][代码]'adasdadasdadadasdadadadadasdadad ----'[代码] [代码]+ i[代码][代码]        [代码][代码]});[代码][代码]      [代码][代码]}[代码] [代码]      //数据分页[代码] [代码]      [代码][代码]this[代码][代码].pagedList = [代码][代码]this[代码][代码].pageList(list);[代码][代码]      [代码][代码]this[代码][代码].setData({[代码][代码]        [代码][代码]listLength: list.length,[代码][代码]        [代码][代码]list: [[代码][代码]this[代码][代码].pagedList[0]][代码][代码]      [代码][代码]})[代码][代码]  [代码][代码]},[代码] [代码]  //滚动监听[代码] [代码]  [代码][代码]onListScroll(e) {[代码][代码]    [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].inPageUpdate) {[代码][代码]      [代码][代码]return[代码][代码];[代码][代码]    [代码][代码]}[代码][代码]    [代码][代码]var[代码] [代码]{ scrollTop } = e.detail;[代码][代码]    [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].currentPage > 0) {[代码][代码]      [代码][代码]var[代码] [代码]pageFrame = [代码][代码]this[代码][代码].data.pageFrame[[代码][代码]this[代码][代码].currentPage - 1];[代码][代码]      [代码][代码]var[代码] [代码]screenHeight = wx.getSystemInfoSync().screenHeight;[代码][代码]      [代码][代码]if[代码] [代码]((scrollTop + screenHeight) - (pageFrame.lastBottom + pageFrame.height) < -200) {[代码][代码]        [代码][代码]this[代码][代码].inPageUpdate = [代码][代码]true[代码][代码];[代码][代码]        [代码][代码]this[代码][代码].currentPage -= 1;[代码][代码]        [代码][代码]this[代码][代码].setData({[代码][代码]          [代码][代码]currentPage: [代码][代码]this[代码][代码].currentPage,[代码][代码]        [代码][代码]}, () => {[代码][代码]          [代码][代码]this[代码][代码].inPageUpdate = [代码][代码]false[代码][代码];[代码][代码]        [代码][代码]})[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]}[代码][代码]    [代码][代码]var[代码] [代码]currentPageFrame = [代码][代码]this[代码][代码].data.pageFrame[[代码][代码]this[代码][代码].currentPage];[代码][代码]    [代码][代码]if[代码] [代码](currentPageFrame) {[代码][代码]      [代码][代码]if[代码] [代码](scrollTop - (currentPageFrame.lastBottom + currentPageFrame.height) > 200) {[代码][代码]        [代码][代码]this[代码][代码].inPageUpdate = [代码][代码]true[代码][代码];[代码][代码]        [代码][代码]this[代码][代码].currentPage += 1;[代码][代码]        [代码][代码]this[代码][代码].setData({[代码][代码]          [代码][代码]currentPage: [代码][代码]this[代码][代码].currentPage,[代码][代码]        [代码][代码]}, () => {[代码][代码]          [代码][代码]this[代码][代码].inPageUpdate = [代码][代码]false[代码][代码];[代码][代码]        [代码][代码]})[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]},[代码] [代码]  //计算分页高度[代码] [代码]  [代码][代码]reachPageBottom() {[代码][代码]    [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].inPageUpdate) {[代码][代码]      [代码][代码]return[代码][代码];[代码][代码]    [代码][代码]}[代码][代码]    [代码][代码]this[代码][代码].inPageUpdate = [代码][代码]true[代码][代码];[代码][代码]    [代码][代码]if[代码] [代码]([代码][代码]this[代码][代码].currentPage < [代码][代码]this[代码][代码].pagedList.length - 1) {[代码][代码]      [代码][代码]var[代码] [代码]self = [代码][代码]this[代码][代码];[代码][代码]      [代码][代码]var[代码] [代码]currentPage = [代码][代码]this[代码][代码].currentPage;[代码][代码]      [代码][代码]wx.createSelectorQuery().select([代码][代码]'#listpage-'[代码] [代码]+ [代码][代码]this[代码][代码].currentPage).boundingClientRect([代码][代码]function[代码] [代码](rect) {[代码][代码]        [代码][代码]if[代码] [代码](currentPage > 0) {[代码][代码]          [代码][代码]rect.lastBottom = self.data.pageFrame[currentPage - 1].height + self.data.pageFrame[currentPage - 1].lastBottom[代码][代码]        [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]          [代码][代码]rect.lastBottom = 0;[代码][代码]        [代码][代码]}[代码][代码]        [代码][代码]self.setData({[代码][代码]          [代码][代码][`pageFrame[${currentPage}]`]: rect[代码][代码]        [代码][代码]})[代码][代码]      [代码][代码]}).exec();[代码] [代码]      [代码][代码]this[代码][代码].currentPage = [代码][代码]this[代码][代码].currentPage + 1;[代码][代码]      [代码][代码]var[代码] [代码]nextPage = [代码][代码]this[代码][代码].pagedList[[代码][代码]this[代码][代码].currentPage];[代码][代码]      [代码][代码]var[代码] [代码]key = `list[${[代码][代码]this[代码][代码].currentPage}]`[代码][代码]      [代码][代码]var[代码] [代码]data = {};[代码][代码]      [代码][代码]data[key] = nextPage;[代码][代码]      [代码][代码]data.currentPage = [代码][代码]this[代码][代码].currentPage;[代码][代码]      [代码][代码]console.log(data);[代码][代码]      [代码][代码]this[代码][代码].setData(data, () => {[代码][代码]        [代码][代码]this[代码][代码].inPageUpdate = [代码][代码]false[代码][代码];[代码][代码]      [代码][代码]});[代码][代码]    [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]      [代码][代码]this[代码][代码].setData({[代码][代码]        [代码][代码]pageEnd: [代码][代码]true[代码][代码],[代码][代码]      [代码][代码]}, () => {[代码][代码]        [代码][代码]this[代码][代码].inPageUpdate = [代码][代码]false[代码][代码];[代码][代码]      [代码][代码]})[代码][代码]    [代码][代码]}[代码] [代码]  [代码][代码]},[代码][代码]  [代码][代码]listItemTap(e) {[代码] [代码]    //响应点击事件[代码] [代码] [代码] [代码]    [代码][代码]console.log(e.currentTarget.dataset);[代码][代码]  [代码][代码]},[代码] [代码]  //分页函数[代码] [代码]  [代码][代码]pageList(list) {[代码][代码]    [代码][代码]var[代码] [代码]splitArray = (arr, len) => {[代码][代码]      [代码][代码]var[代码] [代码]a_len = arr.length;[代码][代码]      [代码][代码]var[代码] [代码]result = [];[代码][代码]      [代码][代码]for[代码] [代码]([代码][代码]var[代码] [代码]i = 0; i < a_len; i += len) {[代码][代码]        [代码][代码]result.push(arr.slice(i, i + len));[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]return[代码] [代码]result;[代码][代码]    [代码][代码]}[代码][代码]    [代码][代码]var[代码] [代码]pagedList = splitArray(list, [代码][代码]this[代码][代码].pageSize);[代码][代码]    [代码][代码]return[代码] [代码]pagedList;[代码][代码]  [代码][代码]}[代码] [代码]})[代码]  [代码]/*index.wxss*/[代码][代码]page {[代码][代码]  [代码][代码]height[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]}[代码] [代码].list {[代码][代码]  [代码][代码]height[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]}[代码] [代码].listitem {[代码][代码]  [代码][代码]line-height[代码][代码]: [代码][代码]50[代码][代码]rpx;[代码][代码]  [代码][代码]padding[代码][代码]: [代码][代码]20[代码][代码]rpx;[代码][代码]  [代码][代码]font-size[代码][代码]: [代码][代码]32[代码][代码]rpx;[代码][代码]  [代码][代码]color[代码][代码]: [代码][代码]#ff0000[代码][代码];[代码][代码]  [代码][代码]border-bottom[代码][代码]: [代码][代码]1[代码][代码]rpx [代码][代码]solid[代码] [代码]#eeeeee[代码][代码];[代码][代码]}[代码] [代码].list-end{[代码][代码]    [代码][代码]text-align[代码][代码]: [代码][代码]center[代码][代码];[代码][代码]    [代码][代码]font-size[代码][代码]: [代码][代码]18[代码][代码]rpx;[代码][代码]    [代码][代码]color[代码][代码]: [代码][代码]#b2b2b2[代码][代码];[代码][代码]    [代码][代码]margin[代码][代码]: [代码][代码]15[代码][代码]rpx [代码][代码]0[代码] [代码]7.5[代码][代码]rpx;[代码][代码]    [代码][代码]display[代码][代码]: flex;[代码][代码]    [代码][代码]flex-[代码][代码]direction[代码][代码]: row;[代码][代码]    [代码][代码]justify-[代码][代码]content[代码][代码]: [代码][代码]center[代码][代码];[代码][代码]    [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码]}[代码] [代码].list-end .line {[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]20%[代码][代码];[代码][代码]  [代码][代码]height[代码][代码]: [代码][代码]1px[代码][代码];[代码][代码]  [代码][代码]background-color[代码][代码]: [代码][代码]#dddddd[代码][代码];[代码][代码]  [代码][代码]margin[代码][代码]: [代码][代码]0[代码] [代码]30[代码][代码]rpx;[代码][代码]}[代码] [代码]<!-- index.wxml -->[代码][代码]  [代码][代码]<[代码][代码]scroll-view[代码] [代码]class[代码][代码]=[代码][代码]"list"[代码] [代码]style[代码][代码]=[代码][代码]''[代码] [代码]scroll-y[代码][代码]=[代码][代码]"true"[代码] [代码]bindscrolltolower[代码][代码]=[代码][代码]"reachPageBottom"[代码] [代码]bindscrolltoupper[代码][代码]=[代码][代码]"reachPageTop"[代码] [代码]bindscroll[代码][代码]=[代码][代码]"onListScroll"[代码]  [代码]enable-back-to-top[代码][代码]=[代码][代码]"true"[代码] [代码]upper-threshold[代码][代码]=[代码][代码]'100'[代码] [代码]lower-threshold[代码][代码]=[代码][代码]"100"[代码] [代码]scroll-top[代码][代码]=[代码][代码]"{{scrollTo}}"[代码][代码]>[代码] [代码]    <!-- 循环分页 -->[代码] [代码]    [代码][代码]<[代码][代码]view[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{list}}"[代码] [代码]wx:for-item[代码][代码]=[代码][代码]"subList"[代码] [代码]wx:for-index[代码][代码]=[代码][代码]"page"[代码] [代码]id[代码][代码]=[代码][代码]"listpage-{{page}}"[代码] [代码]wx:key[代码][代码]=[代码][代码]"listpage"[代码]  [代码]>[代码] [代码] [代码] [代码]      <!-- 判断页面状态 -->[代码] [代码]      [代码][代码]<[代码][代码]block[代码] [代码]wx:if="{{page - currentPage >= -1 && page - currentPage <= 1}}" >[代码] [代码]        <!-- item渲染 -->[代码] [代码]        [代码][代码]<[代码][代码]template[代码] [代码]is[代码][代码]=[代码][代码]"listitem"[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{subList}}"[代码] [代码]data[代码][代码]=[代码][代码]"{{item:item, page,index}}"[代码] [代码]/>[代码][代码]      [代码][代码]</[代码][代码]block[代码][代码]>[代码][代码]      [代码][代码]<[代码][代码]view[代码] [代码]wx:else [代码][代码]style[代码][代码]=[代码][代码]'height:{{pageFrame[page].height}}px;'[代码] [代码]></[代码][代码]view[代码][代码]>[代码][代码]    [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"list-end"[代码] [代码]wx:if="{{listLength > 0}}">[代码][代码]        [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'line'[代码][代码]></[代码][代码]view[代码][代码]>[代码][代码]        [代码] [代码]        [代码][代码]<[代码][代码]text[代码] [代码]wx:if[代码][代码]=[代码][代码]"{{pageEnd}}"[代码][代码]>以上共{{listLength || 0}}个数据</[代码][代码]text[代码][代码]>[代码][代码]        [代码][代码]<[代码][代码]button[代码] [代码]wx:else [代码][代码]loading[代码][代码]=[代码][代码]"true"[代码][代码]        [代码][代码]disabled[代码][代码]=[代码][代码]"true"[代码] [代码]bindtap[代码][代码]=[代码][代码]"empty"[代码] [代码]class[代码][代码]=[代码][代码]"button-noborder"[代码] [代码]style[代码][代码]=[代码][代码]'font-size: 26rpx; background-color:transparent'[代码] [代码]>正在加载更多...</[代码][代码]button[代码][代码]> [代码][代码]        [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'line'[代码][代码]></[代码][代码]view[代码][代码]>[代码][代码]    [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]  [代码][代码]</[代码][代码]scroll-view[代码][代码]>[代码] [代码]  [代码][代码]<[代码][代码]template[代码] [代码]name[代码][代码]=[代码][代码]"listitem"[代码][代码]>[代码][代码]  [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'listitem'[代码] [代码]bindtap[代码][代码]=[代码][代码]'listItemTap'[代码] [代码]data-item[代码][代码]=[代码][代码]'{{item}}'[代码] [代码]>[代码][代码]      [代码][代码]<[代码][代码]view[代码][代码]>{{item.name}}</[代码][代码]view[代码][代码]>[代码][代码]      [代码][代码]<[代码][代码]view[代码][代码]>{{item.desc}}</[代码][代码]view[代码][代码]>[代码][代码]      [代码][代码]<[代码][代码]view[代码][代码]>{{item.content}}</[代码][代码]view[代码][代码]>[代码][代码]      [代码][代码]<!-- 循环100个节点 -->[代码][代码]      [代码][代码]<[代码][代码]text[代码][代码]>{{page}}--</[代码][代码]text[代码][代码]>[代码][代码]      [代码][代码]<[代码][代码]text[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{100}}"[代码] [代码]wx:for-index[代码][代码]=[代码][代码]'i'[代码] [代码]>{{index}}</[代码][代码]text[代码][代码]>[代码] [代码]  [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]  [代码][代码]</[代码][代码]template[代码][代码]>[代码] demo见代码片段 [代码]https:[代码][代码]//developers.weixin.qq.com/s/ItRHXsmg7L5r[代码]使用小程序开发工具导入片段可直接运行