不敢说是最好的，但是感觉也应该是性能和体验比较极致的下拉刷新扩展了，老规矩，代码片段放最后了~ 2020.2.22 修复了小程序基础库v2.10.2带来的不能滚动的问题，最新代码片段见scroll-view-extends 原理 其实原理很简单，和普通H5以及市面上有的下拉刷新没有特别大的区别，都是基于[代码]touch[代码]手势检测事件来实现下拉刷新的。[代码]touchstart[代码]的时候记录当前触摸点，[代码]touchmove[代码]的时候开始计算移动方向和移动距离, [代码]touchend[代码]的时候计算是否要进行下拉刷新操作。如图所示： [图片] 实现方法 调研了一些实现方法，目前大部分都是通过js计算，然后setData来改变元素的[代码]transform[代码]值实现下拉刷新。考虑到性能问题，此处使用了[代码]wxs[代码]的响应式能力来实现整个计算逻辑，不用通过逻辑层和视图层通信，直接在视图层进行渲染。具体文档请参考wxs响应事件。 这里在[代码]list[代码]组件(由[代码]scroll-view[代码]组成)下抽出了一个[代码]scroll.wxs[代码]作为响应事件的事件处理函数集合，源码基本上就在[代码]scroll.wxs[代码]和[代码]list[代码]组件。 [代码]scroll.wxs[代码]定义了如下变量和函数： [代码]var moveStartPosition = 0 //开始位置 var moveDistance = 0 //移动距离 var moveRefreshDistance = 60 //达到刷新的阈值 var moveMaxDistance = 100 //最大可滑动距离 var isRefreshMaxDown = false //是否达到了最大距离， 用来判断是否要震动提示 var loading = false //是否正在loading ... ... module.exports = { touchStart: touchStart, //手指开始触摸事件 touchMove: touchMove, //手指移动事件 touchEnd: touchEnd, //手指离开屏幕事件 loadingTypeChange: loadingTypeChange, //请求状态变化监听，监听刷新请求开始和请求完成 triggerRefresh: triggerRefresh //主动触发刷新操作，比如点击页面上一个按钮，重新刷新list，这就需要用到这个方法 } [代码] [代码]touchStart[代码]和[代码]touchMove[代码]就不用说了，代码注释都很明白，普通的监听移动和处理逻辑。 [代码]touchEnd[代码]主要是判断移动距离是否达到了阈值，然后根据结果，调用监听实例的[代码]callMethod[代码]方法触发[代码]refreshStart[代码]或者[代码]refreshCancel[代码]方法，这两个方法都是写到[代码]list[代码]组件里面的，用来触发刷新方法或者取消刷新。 [代码]loadingTypeChange[代码]方法主要是监听刷新是否完成，以此来触发动画效果。 [代码]triggerRefresh[代码]通过监听主动触发的变量来处理。如果需要主动触发刷新，则调用[代码]list[代码]组件内部的[代码]forceRefresh[代码]方法，具体使用示例在[代码]index/index/js[代码]的[代码]onLoad[代码]函数有: [代码]this.selectComponent('.list').forceRefresh()[代码] [代码]scroll.wxs[代码]里面还有一个未导出的方法，叫[代码]drawTransitionY[代码]，这个方法主要是因为[代码]ios12[代码]对于[代码]transition[代码]动画效果支持的不好，所以自己写了个Y轴方向的动画（[代码]linear[代码]线性的），大佬们可以自己往上添加各种[代码]ease-in-out[代码]效果。 里面具体的实现可以查看代码注释哦~ 使用 好了，前面讲了实现的原理和方法，那么在代码里面，应该怎么直接使用呢？如下代码所示： [代码]<!-- 使用示例 --> <list class="list" refresh-loading="{{refreshLoading}}" loading="{{loading}}" bindrefresh="initList" bindloadmore="loadmore"> <!-- your code --> </list> [代码] [代码]refresh-loading[代码]属性用来通过外部loading态来控制刷新动画的开始结束，因为每当变化[代码]refresh-loading[代码]的值时，会将变化同步到组件内的[代码]showRefresh[代码]属性，[代码]wxs[代码]通过监听[代码]showRefresh[代码]来处理动画逻辑。 [代码]loading[代码]属性是上拉加载更多的时候触发的loading态展示，跟刷新无关 [代码]bindrefresh[代码]是刷新触发时绑定的函数，下拉刷新动画成功开始后触发这个函数 [代码]bindloadmore[代码]透传[代码]scroll-view[代码]的加载更多方法 当然，源码里面也包含了一个[代码]list-item[代码]组件，这个跟本文没太大关系，是用来做瀑布流长列表内容太多时的内存不足问题解决方案的，具体请看解决小程序渲染复杂长列表，内存不足问题 干货 最后，上代码片段， 小程序代码片段 github地址

小程序如何合理合规引导用户关注公众号或者添加客服微信点击客服，出现"你可能发送的图片"或者"你可能发送的小程序" 在之前的文章中我写过，如果通过小程序合理合规引导用户关注公众号，具体见下文 https://developers.weixin.qq.com/community/develop/article/doc/000208cb3fc438638ae9fd6d451013 其中提到一种方式就是客服消息， 自定义卡片消息交互设计示例 具体示例图如下所示： 以下截图来自小程序抽奖助手 [图片] [图片] [图片] [图片] 自定义卡片消息代码片段 https://developers.weixin.qq.com/miniprogram/dev/component/button.html 该技术是自定义客服卡片，具体代码可以参考 欢迎使用代码片段，可在控制台查看代码片段的说明和文档 联系客服 https://developers.weixin.qq.com/s/NHTz9tml76c3 [图片]

今天早上起床看到群里有问到这个问题，才想起总结下这个需求 小程序内部引导关注公众号的4种方式 由于小程序某些功能存在诸多的限制，而公众号相对开放一些，所以一定会有把小程序用户引导关注公众号的需求，现记录如下 1、小程序关注组件，这个是官方已具有的，本文不做叙述，后面碰到示例截图补充 [图片] 该方式是有限制的，请具体了解官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/official-account.html 公众号关注组件。当用户扫小程序码打开小程序时，开发者可在小程序内配置公众号关注组件，方便用户快捷关注公众号，可嵌套在原生组件内。 2、小程序内部嵌入公众号二维码图片，提示保存二维码图片到本地然后扫码关注，截图示例如下 3、通过文字描述，提示用户搜索公众号名字进而关注 [图片] 4、客服消息，这是本次笔记的重点 现通过小程序抽奖助手截图示例，下面截图仅仅代表方式3，客服消息方式 [图片] 占位 [图片] 占位 [图片] 占位 [图片] 占位 之前有朋友，通过app唤起小程序，然后再拉起客服消息发送公众号二维码，这种行为存在风险，建议慎用 ！ [图片] 在APP报名课程后 拉起小程序，通过发送客服消息来引导关注公众号 之前：已明确提示用户是要关注公众号，不存在故意诱导行为。报名课程后让用户关注公众号，是为了提醒用户及时上课、提交作业等。 [图片]