下拉二楼是一种常见的交互设计，可以为应用中的内容展示提供更多的可能性。 通过下拉操作，开发者可以在二楼展示更丰富、更多样化的内容，从而增加用户的点击量和留存率，例如宣传视频、精选商品、走心故事等等。 在小程序中，下拉二楼一直是一种难以实现的交互设计，即使部分小程序实现了，但效果和性能都很差。 为了丰富小程序的内容展示，提高用户的使用体验，小程序官方近期推出了下拉二楼的能力，方便小程序开发者使用。 效果展示 让我们来看看小程序 scroll-view 实现下拉效果的效果～ [图片] 实现步骤 接下来，我们来看下如何使用 scroll-view 实现下拉二楼 1、配置下拉相关属性 scroll-view 新增了以下接口供开发者配置下拉二楼的能力，开发者可以根据业务需要配置相关的属性 属性 说明 refresher-two-level-enabled 开启下拉二级能力，配置开启需同时配置 refresher-two-level-triggered 设置打开/关闭二级 refresher-two-level-threshold 下拉二级阈值 refresher-two-level-close-threshold 滑动返回时关闭二级的阈值 refresher-two-level-scroll-enabled 处于二级状态时是否可滑动 refresher-ballistic-refresh-enabled 惯性滚动是否触发下拉刷新 refresher-two-level-pinned 即将打开二级时否定住 [代码]<scroll-view type="list" scroll-y // 开启下拉刷新（下拉二级必须开启下拉刷新） refresher-enabled="{{true}}" // 开启下拉二级能力 refresher-two-level-enabled="{{true}}" // 处于二级状态是否可滑动 refresher-two-level-scroll-enabled="{{true}}" > ... </scroll-view> [代码] 2、实现二楼内容 配置完下拉二楼属性之后，接着就是将我们的二楼实现在 scroll-view 中。 在 scroll-view 放置一个子节点，声明 slot=“refresher”，该节点中的内容即为下拉二楼的内容。 [代码]<scroll-view ... > <view slot="refresher"> 这里是二楼的内容 </view> </scroll-view> [代码] 3、根据下拉状态回调进行个性化处理 接着我们需要根据业务小程序自身的诉求，根据下拉状态的回调进行个性化的处理，例如：下来完成跳转页面等。 在 scroll-view 绑定 bind:refresherstatuschange 监听下拉状态，下拉状态有以下几种 属性 说明 Idle 空闲 CanRefresh 超过下拉刷新阈值 Refreshing 下拉刷新 Completed 下拉刷新完成 Failed 下拉刷新失败 CanTwoLevel 超过下拉二级阈值 TwoLevelOpening 开始打开二级 TwoLeveling 打开二级 TwoLevelClosing 开始关闭二级 [代码]<scroll-view bind:refresherstatuschange="onStatusChange" ... > <view slot="refresher"></view> ... </scroll-view> // .js onStatusChange(e) { const status: RefreshStatus = e.detail.status if (status === RefreshStatus.TwoLeveling) { const that = this // 当打开二级之后，跳转到新的页面 wx.navigateTo({ url: '../goods/index', events: { nextPageRouteDone: function(data) { // 新页面打开之后，关闭下拉二楼 that.scrollContext.closeTwoLevel({ duration: 1 }) } } }) } } [代码] 我们来演示一下松手立即跳转（图左）、完全打开二楼后跳转（图右） [图片] 丰富小程序展示内容和形式，欢迎大家使用小程序下拉二楼，为小程序的内容展示提供更多的可能性和创意发挥的空间。 通过下拉二楼，可以展示更丰富、更多样化的内容，也为小程序的发展带来了更多的机会和挑战～ 赶紧 mark 下这个 代码片段 来接入使用吧～

今年年初，在官方文档上看到小程序团队要推出一款性能逼近原生的渲染引擎Skyline，就一直在关注。刚好最近打算做一款新的阅读小程序，作为一名独立开发者，对于性能和用户体验的追求是永无止境的，于是我决定用纯Skyline打造这款小程序。 当然，这个项目里面所用到的skyline特性只是冰山一角，并非全部，更多酷炫的特性请前往官方文档查阅。 接下来，我会结合快书小程序，从以下几个方面，逐条阐述关于skyline特性（快书项目中所用到的）的理解与应用： 效果演示。如何开启Skyline。新版组件swiper。新版组件scroll-view。全新组件snapshot。增强特性worklet动画。增强特性手势系统。增强特性自定义路由。增强特性共享元素动画。希望对于刚接触Skyline，或者想要了解Skyline的同学有所帮助。当然，如有错误或遗漏，欢迎在评论区批评指正，不胜感激。 一、效果演示 [图片] 二、如何开启Skyline 开启Skyline的方式非常简单，只需要在app.json文件中，加入以下配置即可（这里是全局Skyline，若只打算指定页面开启，则在指定页面的json文件中配置即可）： "renderer": "skyline", "lazyCodeLoading": "requiredComponents", "rendererOptions": {   "skyline": {     "defaultDisplayBlock": true,   } }, "componentFramework": "glass-easel", 三、新版组件-Swiper 旧版的Swiper基于webview的，在性能上有所局限，特别是当swiper-item的数量动态不断增加的情况下。当然，也可以自己想办法去优化，比如做懒加载和缓存，但相对来说比较麻烦。而Skyline版本的Swiper性能会大幅度提升，首先渲染引擎本身的性能提升了，另外官方也做了缓存的功能，只需要通过定义cache-extent的值，就能轻松定义缓存区域大小，例如值为 1 则表示提前渲染上下各一屏区域。 [图片] 用法上，和webview版本没有太大区别（这里就不放代码了），只需注意不要使用某些webview独有的特性即可。 四、新版组件-Scroll-view 同样，旧版的scroll-view也基于webview的，滚动元素过多的时候会有明显卡顿，当然也是可以通过虚拟Dom的方式自行优化。然而，Skyline版本的scroll-view官方已经实现了只会渲染在屏节点的特性，大大提升了滚动的流畅度，真正做到了开箱即用。 用法上，有以下几个点要注意的。 指定type属性，有2个可选值，分别为：list和custom，对应的是列表模式和自定义模式。如是普通列表，list即可，如果是稍微复杂的列表，比如常见的瀑布流表现形式（类似小红书那样），则可使用custom。只有直接子节点才能根据是否在屏来按需渲染。即你不能把你的列表项，都放在同一个父级view中，而是应该直接放在scroll-view组件下。 // 错误的方式： <scroll-view type="list" scroll-y> <view> <view class="item" wx:for="{{dataList}}" wx:key="id"></view> </view> </scroll-view> // 正确的方式 <scroll-view type="list" scroll-y> <view class="item" wx:for="{{dataList}}" wx:key="id"></view> </scroll-view> // 正确的方式 <scroll-view type="custom" scroll-y> <list-view> <view class="item" wx:for="{{dataList}}" wx:key="id"></view> <list-view> </scroll-view> 另外，上面提到了瀑布流的问题，实现方式也很简单，官方提供了一个叫做grid-view的组件，只需定义它的type="masonry"即可，但若是在webview下，除了性能不理想以外，还会有一些小BUG，比如我在社区提的这个问题：grid-view masonry 在webview模式下经常会出现大块区域的空白。在Skyline下，就不会出现此类问题。 [图片] <scroll-view type="custom" scroll-y> <grid-view type="masonry" main-axis-gap="15" cross-axis-gap="15"> <view wx:for="{{dataList}}" wx:key="id"></view> </grid-view> </scroll-view> 五、全新组件Snapshot 我们常常会有分享精美海报的需求，但由于海报上的内容是动态，仅仅使用一张图片分享达不到我们的目的。在以往，我们可能会使用到wxml-to-canvas，通过绘制 canvas ，导出图片。现在，在Skyline下（基础库3.0.0以上），实现此需求就非常简单。只需要将我们要分享的内容包裹在snapshot组件下就行。 [图片] // wxml: <snapshot id="target"> <view>content</view> </snapshot> // page: Page({ onReady() { this.createSelectorQuery() .select("#target") .node() .exec(res => { const node = res[0].node node.takeSnapshot({ type: 'arraybuffer', format: 'png', success: (res) => { fs.writeFileSync(savePath,res.data,'binary'); //图片保存至本地 wx.showShareImageMenu({ //唤起分享图片的界面        path:savePath       }) }, fail(res) {} }) } }) 六、增强特性-worklet动画 worklet动画相比传统的方式，流畅度提升了不少，但如何使用呢？常见的普通动画无非是对于页面元素的平移，缩放，旋转等变换。那么，要让一个元素动起来，只需要做以下2件事： 将页面元素的样式与某个变量进行绑定，变量值的变化会自动触发样式的更新。实时动态地改变这个变量。结合快书的例子（下拉时，让页面缩小，松手后，页面弹回），来看一下具体的实现步骤。 [图片] 首先，如何绑定样式与参数呢？通过官方提供的一个applyAnimatedStyle函数： // Wxml: <view id="#box">content</box> // Page: this.scale = shared(1); //这里是定义一个共享变量，即可在UI线程和JS线程间同步的变量。 this.applyAnimatedStyle(`#box`, () => { 'worklet'; // 声明这是一个worklet函数 return { transform: `scale(${this.scale.value})`, }; }); // 1、这里使用共享变量是为了让后续改变这个变量时，worklet的函数能捕获到。 // 2、#box你要动起来的元素 // 3、当this.scale.value变化时，会自动触发函数体的执行，从而改变#box的样式 第二步，下拉时，根据下拉的偏移量，改变这个scale的值。 this.scale.value = (evt.deltaY / 100) * 0.15; // 这里的evt.deltaY是下拉时的位置偏移量，然后根据偏移量按比例计算缩放的值 // 如何获取这个下拉偏移量？下一小节讲手势系统时会讲到 第三步，松手时，复原scale的值。 this.scale.value = timing(1, { duration: 300, easing: Easing.ease }); // timing函数表示：在300毫秒内，scale.value会逐渐变成1 // easing: Easing.ease 表示缓动的方式，具体可参考https://easings.net // 如何知道已经松手了？下一小节讲手势系统时会讲到 更多动画参考请查阅官方文档。 七、增强特性-手势系统 还是上面那个例子，我们只说了下拉时根据下拉的偏移量改变scale的值，那如何得到下拉的偏移量呢？这里就涉及到了手势系统。下面讲讲如何让一个元素能响应拖动，缩放等手势。 说回上一小结的例子，我们只需要讲#box元素包裹在手势组件vertical-drag-gesture-handler即可。更多示例可查阅官方文档 // wxml: <vertical-drag-gesture-handler worklet:ongesture="handlePan"> <view id="box"></view> <vertical-drag-gesture-handler> // page: handlePan(evt) { 'worklet'  if (evt.state === GestureState.ACTIVE) { // 拖拽时   if (evt.deltaY > 0) { // 下拉    this.scale.value = Math.max(this.scale.value - (evt.deltaY / 100) * 0.15, 0.85);   } else { // 上拉    this.scale.value = Math.min(this.scale.value - (evt.deltaY / 100) * 0.15, 1);   }  } else if (evt.state === GestureState.END || evt.state === GestureState.CANCELLED) { // 拖拽结束或取消   this.scale.value = timing(1, { duration: 300, easing: Easing.ease });  } }, 然而，当手势组件与scroll-view等可以滚动的组件嵌套时，会出现冲突的问题。比如，同上一小节的示例，为了让文章内容过长时可以滚动，我们需要将文章的内容放在scroll-view中。当scroll-view已经滚动到顶部，再继续下拉的话，应当触发手势组件的拖拽事件，即缩放页面。相反，则继续滚动scroll-view。 [图片] // wxml: <vertical-drag-gesture-handler tag="pan" worklet:ongesture="handlePan" shouldResponseOnMove="shouldPanResponse" simultaneousHandlers="{{['scroll']}}"> <vertical-drag-gesture-handler tag="scroll" native-view="scroll-view" shouldResponseOnMove="shouldScrollResponse" simultaneousHandlers="{{['pan']}}"> <scroll-view type="list" scroll-y bindscroll="handleContentScroll">文章内容</scroll-view> </vertical-drag-gesture-handler> </vertical-drag-gesture-handler> // page: // 处理scroll-view的滚动事件，获取scrollTop的值 handleContentScroll(evt) { 'worklet' this.scrollTop.value = evt.detail.scrollTop; }, // return false 则表示scroll-view不再响应滚动事件 shouldScrollResponse(evt) { 'worklet';  const { deltaY } = evt  if (this.scrollTop.value <= 0 && deltaY > 0) { //scroll-view已经滚动到顶部，继续下拉时   this.pan.value = true;   return false;  }  if (this.scale.value < 1 && deltaY < 0) { //#box已经被缩放，继续上拉时   this.pan.value = true;   return false;  }  this.pan.value = false;  return true; }, shouldPanResponse() { 'worklet' return this.pan.value; // true表示响应手势组件的拖拽事件，false则不响应 }, 八、增强特性-自定义路由 以往在webview中，路由的的过渡动画仅支持从右到左，较为单调。在skyline之后，我们可以自定义路由的过渡动画了，比如常见的淡入淡出，从底部弹起等。比如以下这个例子，从首页点击图片，会跳转到分享的页面，这里就是用自定义路由实现的淡入效果。 [图片] 自定义路由的使用相比前几个特性稍微复杂一点，这里官方讲的更为具体和清晰，可查阅官方文档。唯一要注意的一点是，只有连续的skyline页面跳转时，才会有效果。 九、增强特性-共享元素动画 还是上面的例子，当从首页点击图片跳转到分享页面时，图片看起来像是从首页飞到了分享页，这里便是使用到了共享元素动画。我同时也做Flutter的开发，所以这里看起来非常类似Flutter的hero动画或者叫飞行动画。 使用方式也类似于Flutter。将2个页面的相似组件都用share-element组件包括起来，并且使用相同的key即可。再配合自定义路由，可使得飞行动画看起来非常的丝滑。 // A页面： <share-element key="唯一key"> <image src="imagePath" mode="aspectFill" /> </share-element> // B页面： <share-element key="唯一key"> <image src="imagePath" mode="aspectFill" /> </share-element> // 有几个要注意的地方 // 1、两个个页面的share-element组件必须使用相同的key。 // 2、key是唯一的，即同一个页面中，不能出现重复的key。 // 3、image不要写死宽高，应百分比100%，具体宽高数值写在share-element组件上。 有一个常见的问题，A页面是一个列表，B页面是详情页，列表中的数据都是通过接口从后台返回的，由于共享元素的key又不能重复，那么这个key怎么定义？一般后台返回的数据都会有一个唯一标识，假设为ID，我们可以用这个ID当作Key。 但是，另一个问题来了，如果数据是后台接口返回的，然后通过setData的方式响应到页面，那么很有可能B页面的首帧获取不到这个Key，因为这时候接口请求可能还未完成，那么动画也是不会生效的。针对这种情况，官方也提供了一种方式： 共享元素动画需保证下一个页面首帧即创建好 [代码]share-element[代码] 节点，并设置了 key，用于计算目标位置。如果是通过 [代码]setData[代码] 设置的，可能会错过首帧。针对这种情况，可以 使用 Component 构造器构造下一个页面，只要在组件 [代码]attached[代码] 生命周期前（含）通过 [代码]setData[代码] 设置上去，就会在首帧渲染 十、总结 Skyline还有一些其他有趣的特性，大家感兴趣的话可以查阅官方文档。总的来说，相比起webview，skyline对性能的提升是显而易见的，并且，一些在webview很难实现的效果，在skyline的基础上，也能轻易实现，开箱即用。目前，skyline还在不断地迭代中，还有许多的新特性还在评估和开发中，相信之后的版本会更完善更好用。 最后，大家多多使用快书呀，球球了~ [图片]

一、需求: 小程序扫一扫wx.scanCode   这个api扫描不能自定义扫码界面, 如果你们有这种自定义扫码需求 这个时候就需要用camera 自定义扫描界面;  camera文档传送门 : https://developers.weixin.qq.com/miniprogram/dev/component/camera.html --------------------------------------------------------------------------------------------------------------------------------------------- [图片] 二、效果图:(需要获取camera授权权限) [图片][图片][图片] 三、全部代码 <!-- 扫一扫按钮+scanResult扫描结果 --> <button wx:if="{{!canScan}}" type="primary" bindtap="scanShowClick">自定义扫一扫{{scanResult}}</button> <!-- 扫描框 --> <view class="scanBox" wx:if="{{canScan}}">     <camera class="camera" mode="scanCode" bindscancode="scancode" flash='{{flashBtn}}'>         <image class="coverImg" src="{{iconScanBgGif}}"></image>     </camera>     <view style="text-align: center;margin: 80rpx 0 40rpx 0;">         <button class="cu-btn scancodePic" bindtap="changeflashBtn">             <image src="{{flashBtn=='on'?scancodeOpen:scancodeClose}}"></image>         </button>     </view>     <view class="scanTip">请扫描大熊帅照</view>     <!-- 关闭扫码页面 -->     <view class="closeScan" bindtap="scanHideClick">关闭</view> </view> import { iconScanBgGif,scancodeOpen,scancodeClose } from "../../../utils/imgUrl/index"; const permisson = require("../../../utils/tools/permisson"); // 权限校验封装 const userCameraName = "scope.camera"; // 摄像头权限 const userCameraZhName = "手机摄像头"; // 摄像头权限对应的中文名称 Page({     /**      * 页面的初始数据      */     data: {         iconScanBgGif,scancodeOpen,scancodeClose,         canScan: false, // 是否显示自定义扫码界面         flashBtn: 'off', // off关闭   on  打开手电筒         scanResult: '' // 扫描结果     },     /**      * 生命周期函数--监听页面加载      */     onLoad() {              },     /**      * 生命周期函数--监听页面显示      */     onShow() {             },        // 打开关闭手电筒     changeflashBtn(){         this.setData({             flashBtn:this.data.flashBtn=='off'?'on':'off'         })     },     // 显示扫码界面(扫一扫)     scanShowClick(){         // 校验权限, 必须开启摄像头权限         wx.getSetting({             success:async(res)=> {                 if(!res.authSetting['scope.camera']) {                     // 权限封装                     permisson.permission_request(userCameraName, userCameraZhName);                       // 也可自己写,通过 wx.authorize 打开有关授权=>官方链接https://developers.weixin.qq.com/miniprogram/dev/api/open-api/authorize/wx.authorize.html                 } else {                     this.setData({                         canScan:true                     })                     // 顶部标题栏背景变黑                     wx.setNavigationBarColor({                         backgroundColor: '#000000',                         frontColor: '#ffffff',                     });                 }             }         })     },     // 隐藏扫码界面     scanHideClick(){         this.setData({canScan:false})         // 顶部标题栏背景变白         wx.setNavigationBarColor({             backgroundColor: '#ffffff',             frontColor: '#000000',         });     },     // 扫一扫返回数据     scancode(e) {         console.log(e.detail)         const {result:scanResult} = e.detail;          if(result) {             this.setData({scanResult,canScan: false})             // 顶部标题栏背景变白             wx.setNavigationBarColor({                 backgroundColor: '#ffffff',                 frontColor: '#000000'             });         }     } }) /* 扫码框---------------------------------------------- */ .scanBox {     position: fixed;     top: 0;     width: 100%;     height: 100vh;     background-color: #000000; } .camera {     position: relative;     width: 70vw;     height: 70vw;     margin: 20vh auto 0; } .coverImg{     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     z-index: 99999; } .scanTip {     padding: 20rpx 0 0 0;     font-size: 32rpx;     text-align: center;     color: #fff; } /* 开关手电筒 */ .scancodePic{     background: transparent !important;     width: 100rpx;     height: 100rpx;     padding: 0 !important; } .scancodePic>image{     width: 100%;     height: 100%; } /* 关闭按钮 */ .closeScan{     position: absolute;     bottom: 0;     right: 0;     padding: 20rpx 30rpx;     z-index: 99999;     background: #fff; } 四、页面资源 1. permisson.js=>权限校验封装请查看我这篇文https://www.cnblogs.com/520BigBear/p/16968820.html 2. 扫码框背景图,还有手电筒图片 [图片] 白色开灯图标 [图片] 白色关灯图标 [图片] 更多其他参考链接: https://www.cnblogs.com/L-xjco/p/15649832.html

背景 腾讯云医小程序有医患聊天会话的场景，由于会话场景存在查询历史消息的场景，小程序中按照常规思路加载历史消息时会出现跳动的问题；跳动的原因是由于在’顶部’插入dom，会使得后面的dom被往后面推，然后重新设置scroll-top或者scrol-into-view从而导页面出现跳动；我们尝试采用【 前端开发中聊天场景的体验优化】文章中的方案处理跳动的场景。该文章的核心观点将scroll-view元素通过设置css样式 transform: rotateX(180deg); 进行翻转，这样将历史消对应的dom结构放在尾部，当添加更多的历史消息(dom)时，由于dom是添加在尾部很优雅的绕过了插入历史消息跳动的场景。但是当我们按照这种方式实现后，发现scroll-view元素提供的scroll-into-view属性不好使了。因此有了本文通过计算scrollTop值设置scrollTop来达到相同目的。 复现该问题的小程序代码片段：代码片段 目前已经反馈给官方（官方已确认是内部组件实现暂不支持翻转的场景 基础知识介绍 计算scrollTop涉及到一些web和小程序的基础知识，后面针对这些基础点进行简单介绍 .scroll-into-view 微信小程序提供的scroll-view元素提供了属性 scroll-into-view，该属性的作用是可以将指定dom滚动到scroll-view可见区域内 [图片] 关于boundingClientRect 下图是MDN解释该属性时提供的，从下图中可以看到top/bottom/left/right的值是元素的左上角和右下角相对于视口左上角的水/垂直距离 [图片] 为了更深入理解这些值。给出了一个简易的demo(代码片段)，获取实例元素的的boundingClientRect的值后，可以看到这些值是根据元素的border边界进行计算的 [图片] [图片] [图片] 值得注意的是，当元素处于一个滚动区域内部，left/top值是考虑滚动操作的即包含滚动距离的（参考MDN 另外，当我们把容器元素又或者元素自身设置 transform: rotateX/Y(180deg)：不会导致top和bottom的值互换(left与right的值互换)； 总会有这样的结论，当dom元素的宽度和高度不为0时，top值一定小于bottom值，left值一定小于right值 关于scrollTop 当一个容器的内容的高度大于其容器高度时，overflow不为visible/hidden时，则会出现滚动条。出现滚动条后，内容区域则可以滚动，此时scrollTop的值是容器可视区域的顶部到内容区域顶部的距离，见下面示意图。 [图片] 值得注意的是，滚动条出现在盒模型中的content区域，见下图滚动条不会覆盖padding/border部分。因此上面说到内容区域高度超过容器高度并不严谨，严谨的说法应该是超过容器的content区域的高度。 [图片] 如果此时给容器设置css样式: transform: rotateX(180deg); 即沿垂直方向翻转180度，scrollTop的值会发生变化吗。 下面我们看下实际的对比效果，为了方便查看滚动条的效果，给滚动条轨道(红色部分)以及滑块(黑色部分)添加了背景色，发现整个元素包括滚动条在内一并进行了翻转。 正常情况(左侧)，应用翻转css样式(右侧) [图片] [图片] 翻转后的scrollTop值示意图 [图片] 通过计算scrollTop值来模拟scroll-into-view效果（针对scroll-view翻转的场景j） 由于boundingClinetRect的值是包含border边界的，因此当数据项包含padding，border等区域不会影响这里的计算过程，可以认为下面示意图中的数据项部分的边界是border边界； 由于滚动条是出现在content区域，因此容器元素的的border-top/padding-top不为0时，会影响计算流程，因此这里分为两种情况进行介绍： 2.1 假设scroll-view元素的的border-top/padding-top为0 2.2 假设scroll-view元素的的border-top/padding-top不为0 border-top/padding-top为0的情况 为了方便说明计算过程，我定义三种状态，初始态、中间态、最终态 示意图中的区域说明 白色背景的为视口， 绿色背景的是容器（scroll-view）的可视区域， 灰色区域是内容区域，并且内容区域的高度超过了容器的高度， 红色区域是一个数据项 [图片] 现在的目标是将数据项从初始态滚动到最终态即scroll-into-view的效果：border的上边界与可视区域上边界对齐 第一步：从初始态达到中间态 根据上面关于scrollTop的描述，这里如果scrollTop的值是targetDistance即数据项的底部到内容区域的底部的距离，就可以达到中间态，因此现在的目标是求targetDistance 初始状态的已知变量 初始状态下的的scrollTop值：currentScrollTop （由于容器发生翻转，所以scrollTop视觉上指向容器下方） 数据项的boundingClientRect.bottom为 itemBottom 容器的boundingClientRect.bottom为 contianerBottom 通过示意图很容易得出 [代码]targetDistance = currentScrollTop + (containerBottom - itemBottom) [代码] 第二步：从中间到达最终态 已知变量：容器高度：containerHeight、数据项高度：itemHeight 最终态是数据项的顶部距离容器顶部，从示意图中看到中间态到最终态的scrollTop是减少了的，减少的值其实就是cotainerHeight - itemHeight 经过第一步和第二步我们就可以得到scrollTop的计算公式 [代码]let itemScrollTop = currentScrollTop + containerBottom - itemBottom​ itemScrollTop -= (containerHeight - itemHeight)​ => itemScrollTop = currentScrollTop + containerBottom - itemBottom - (containerHeight - itemHeight) [代码] border-top/padding-top不为0的情况 [图片] 根据上面第一种情况的介绍的思路，很容易得到下面结果，不再赘述（X 就是容器padding-top + border-top的值） [代码]let itemScrollTop = currentScrollTop + containerBottom - itemBottom - X itemScrollTop -= (containerHeight - itemHeight - X) => itemScrollTop = currentScrollTop + containerBottom - itemBottom - X - (containerHeight - itemHeight - X) => itemScrollTop = currentScrollTop + containerBottom - itemBottom - (containerHeight - itemHeight) [代码] 【结论】两种情况最终的计算过程是一样的，因此在实现的过程中不需要进行区分 代码实现 代码片段见：https://developers.weixin.qq.com/s/y1X11dmr7AqC 视图层代码 [代码]{{item.content}} ​ #scroll-view { position: absolute; top: 50px; bottom: 50px; width: 100%; background-color: rgba(0, 0, 0, 0.1); // 关键case transform: rotateX(180deg); } [代码] 逻辑层核心代码 [代码]scrollTo () { const itemId = '#item_id_50' const containerId = '#scroll-view' Promise.all([this._queryBoundingClient(itemId), this._getScrollInfo(containerId)]) .then((res = [[[{}]], {}]) => { const [[[ { bottom: itemBottom, height: itemHeight }]], { bottom: containerBottom, scrollTop, height: containerHeight }] = res let itemScrollTop = containerBottom - itemBottom + scrollTop itemScrollTop -= (containerHeight - itemHeight) this.setData({ scrollTop: itemScrollTop }) }) }, _queryBoundingClient (selector) { // 获取目标dom的相关位置/尺寸信息 return new Promise(resolve => { const query = this.createSelectorQuery(); query.selectAll(selector).boundingClientRect(); query.exec(resolve); }) }, _getScrollInfo (idSelector) { // 用来获取容器层相关位置/尺寸信息 return new Promise(resolve => { const query = this.createSelectorQuery() query.select(idSelector).boundingClientRect() query.select(idSelector).scrollOffset() query.exec((res = [{}, {}]) => { const [{ top, bottom, height }, { scrollHeight, scrollTop }] = res const scrollInfo = { scrollTop, scrollHeight, top, bottom, height } resolve(scrollInfo) }) }) } [代码]