[图片]

我们开源啦，希望可以给大家的开发之旅带来一些灵感。我后溪的小程序也都会基于这个组件库开发，并且会保持组件库的更新与维护。 我是第一次进行开源，肯定会有错漏，欢迎大家指正，我会以最快的时间响应修改。 Skyline UI 组件库 前言 Skyline 是微信小程序推出的一个类原生的渲染引擎，其使用更精简高效的渲染管线，性能比 WebView 更优异，并且带来诸多增强特性，如 Worklet 动画、手势系统、自定义路由、共享元素等。 使用这个组件库的前提是：通过微信小程序原生+skyline框架开发，所以目前我们不保证兼容webview框架（也就是电脑端与低版本的微信），但后续会进行系统性的兼容。 使用 Skyline UI前，请确保你已经学习过微信官方的 微信小程序开发文档 和 Skyline 渲染引擎文档 。 背景 随着Skyline 渲染引擎 1.1.0 版本发布，我们所运营的小程序也平稳的渡过了阵痛期，团队使用Skyline也越来得心应手，所以接下来，团队的开发重心全面偏向Skyline渲染框架，考虑有大量的UI交互重复，我们决定基于Skyline开发了这个UI组件库。 但团队力量有限，这个新生的组件可能有很多的不尽如人意，所以希望能以开源的方式吸引更多开发者使用Skyline框架，如果这个框架不适合你，也可以借鉴其思路。 Gitee Gitee仓库 在线预览 以下是目前两个使用该框架的小程序 SkylineUI组件库 [图片] NONZERO COFFEE [图片] 开始使用 UI库结构 Skyline UI组件库 依赖于以下四部分，具体使用参考以下的具体说明 utils工具库： 其中包含了UI库自定义的一个工具类SkyUtils，它包含了组件中所含的各种函数，非常重要。 各组件元素：sky-*(组件名) skywxss样式库：其中包含深浅色色彩、文字字体、布局等样式wxss 在小程序中引入 UI库 一、直接下载引入 点击下载组件包 将src下所有文件复制到您项目根目录下的components文件夹中，没有的话请自行新建。 二、npm引入 1.在小程序项目中，可以通过 npm 的方式引入 SkylineUI组件库 。如果你还没有在小程序中使用过 npm ，那先在小程序目录中执行命令： [代码]npm init -y [代码] 2.安装组件库 [代码]npm install jieyue-ui-com [代码] 3.npm 命令执行完后，需要在开发者工具的项目中点菜单栏中的 工具 - 构建 npm 两种引入方式的不同可能导致后续使用时，引用组件的路径不同，请注意区别 1.直接引入components文件夹内，引用地址通常是 ‘./components/‘ 2.npm引入，组件引用地址通常是’./miniprogram_npm/jieyue-ui-com/’ 如何使用 1.在app.js文件中初始化工具类，并且添加两个全局变量 [代码]// app.js App({ onLaunch() { ;(async ()=>{ // 全局注册工具类SkyUtils // 这里默认npm引用，地址为'./components/utils/skyUtils'，如果是直接引用组件，地址可能是'./components/utils/skyUtils',后面不再说明 const SkyUtils = await import('./components/utils/skyUtils'); wx.SkyUtils = SkyUtils.default; // 初始化设备与系统数据 wx.SkyUtils.skyInit() // 小程序自动更新方法 wx.SkyUtils.versionUpdate() })() }, globalData: { sky_system:{}, sky_menu:{} }, }) [代码] 2.在app.wxss文件中引入样式文件 [代码]//wxss * _dark.wxss 是适配深色模式的色彩变量 @import '/miniprogram_npm/jieyue-ui-com/skywxss/skycolor.wxss'; @import '/miniprogram_npm/jieyue-ui-com/skywxss/skycolor_dark.wxss'; @import '/miniprogram_npm/jieyue-ui-com/skywxss/skyfontline.wxss'; @import '/miniprogram_npm/jieyue-ui-com/skywxss/skyfont.wxss'; @import '/miniprogram_npm/jieyue-ui-com/skywxss/skyother.wxss'; [代码] 3.page.json中引用组件 [代码]//page.json { "usingComponents": { "sky-text":"/miniprogram_npm/jieyue-ui-com/sky-text/sky-text" } } [代码] 4.页面中使用 [代码] // wxml <sky-text content="文本内容" max-lines="2" fade></sky-text> [代码] 5.其他组件具体使用请参考组件包中的redeme.md 适配深色模式 如果您在开发时，全部使用我们预设好的颜色变量，那么可以自动适配深色模式。 [代码].page{ background-color: var(--bg-l0); } [代码] [代码] <view style="background-color: var(--bg-l0)"></view> <view style="background-color: {{color}}"></view> [代码] [代码] Page({ data: { color: "var(--bg-l0)" } }) [代码]

预览 [图片] 这是一个用于切换房间的横向选择器 代码预览&详解 <scroll-view scroll-x="{{true}}" scroll-y="{{false}}" scroll-left="{{roomLeft}}" scroll-with-animation="{{true}}" class="top">   <view class="roomPiker {{currentRoom == roomIndex && 'active'}} {{roomIndex === 0 ? 'firstPick' : ''}} {{roomIndex === roomList.length - 1 ? 'lastPick' : ''}}" data-current="{{roomIndex}}" wx:for="{{roomList}}" wx:key="roomIndex" wx:for-index="roomIndex" wx:for-item="Room" catchtap="handleRoomChange">     <view class="pickerContainer">       <view class="round">{{Room.roundYear}}年{{Room.roundMonth}}月</view>       <view class="roomText {{currentRoom == roomIndex && 'active'}}">{{Room.room}}房</view>     </view>   </view> </scroll-view> 使用官方组件scroll-view，首先启用横向滚动，禁用纵向滚动：scroll-x="{{true}}" scroll-y="{{false}}"（tip：参数要带{{}}），启用动画过渡scroll-with-animation，最后绑定滚动条位置scroll-Left； 接着遍历打印房间数组roomList，被选中的房间采用.roomPicker.active，第一个索引值为0房间元素margin-left设置为calc(50% - 32px)，最后一个元素的margin-right则设置为calc(50% - 32px)，这样就可以实现首尾元素都可以居中显示了；/*每个房间元素的宽度width是64px，所以要减去一半宽度*/ wxml的逻辑差不多就是这样。 .top {   height: 64px;   background-color: #FAFAFA;   margin-top: 100px;   padding-top: 9px;   padding-bottom: 9px; /*这里避个坑，scroll-view的样式中尽量不要用左右的padding， 否则列表元素较少的时候会出现后面的元素溢出却不能滚动显示的问题，详情见 本文末问答参考*/   white-space: nowrap;/*必要属性*/   transition: all 0.5s ease;   position: relative;/*必要属性*/ } .roomPiker {   display: inline-block;/*必要属性*/   width: 64px;   height: 64px;   background-color: #E1F5B5;   margin-right: 9px;   /* 防止高度塌陷 */   vertical-align: top;/*必要属性*/ } .pickerContainer {   display: grid;   place-items: center; } .round {   font-size: 12px;   color: #383838; } .roomText {   margin-top: 4px;   font-size: 18px;   color: #383838; } .roomPiker.firstPick {   margin-left: calc(50% - 32px); } .roomPiker.lastPick {   margin-right: calc(50% - 41px); } .roomPiker.active {   background-color: #A5D63F; } .roomText.active {   font-weight: 550;   color: #000000; } wxss需要注意的地方不多，代码中注释的地方必要。 Page({   data: {     roomList: [{       room: 501,       roundYear: 2023,       roundMonth: 11     }, {       room: 502,       roundYear: 2023,       roundMonth: 11     }, {       room: 503,       roundYear: 2023,       roundMonth: 11     }, {       room: 504,       roundYear: 2023,       roundMonth: 11     }, {       room: 505,       roundYear: 2023,       roundMonth: 11     }, {       room: 506,       roundYear: 2023,       roundMonth: 11     }],     currentRoom: 0, //当前显示房间索引     roomLeft: 0, //scroll-view滚动条位置，即距离左边的距离   },   handleRoomChange(e) {//处理点击事件     let {       current     } = e.currentTarget.dataset;     if (this.data.currentRoom == current || current == undefined)       return;     this.setData({       currentRoom: current     })     this.getScrollLeft(); //点击后调用改变滚动条位置的函数   },   getScrollLeft() {//改变滚动条位置，使选中元素在屏幕中央显示     const query = wx.createSelectorQuery();//创建查询对象     query.selectAll(".roomPiker").boundingClientRect(); //调用selectAll方法选择所有class为.roomPiker的元素，并调用boundingClientRect方法获取它们的边界信息。     query.exec(res => {       console.log(res)       let num = 0;       for (let i = 0; i < this.data.currentRoom; i++) {         //num += res[0][i].width;         num += (res[0][i].width + 9)/*记得加上元素间的间隔*/       }//根据当前选中元素前面所有元素的宽度和水平间距计算出滚动条左边距离       const scrollLeft = Math.ceil(num);//取整       this.setData({         roomLeft: scrollLeft,       });     })   } }) 本人是一个学生新手，这只是一篇学习笔记，仅供参考，欢迎指正~ 文档参考：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html问答参考：https://developers.weixin.qq.com/community/develop/doc/00002843c78850e695a0f3dcc6b800

[图片] 如上图， Skyline模式下， 在组件内的 flex 和 items-center 样式，不起作用。 直接把组件内的代码放到页面就没问题。 ------------------------------------------------------------------------------------ 我是用的Uniapp开发的，附上解决方案： 修改 \node_modules\@dcloudio\uni-cli-shared\dist\json\mp\jsonFile.js 文件 function addMiniProgramComponentJson(filename, json) {       // 方法中增加下面这一行，编译后会自动给组件里面加上 optons.styleIsolation 配置     json = Object.assign(json,{"styleIsolation": "apply-shared" });        jsonComponentsCache.set(filename, json);   }

概述小程序插件是对一组 js 接口、自定义组件或页面的封装（插件介绍），必须嵌入在小程序中才能被用户使用，不能独立运行。因此，插件适合用来封装自己的功能或服务，提供给第三方小程序进行展示和使用，本篇实践主要讲解在微搭中的小程序应用如何使用小程序官方插件的指引示例。 实践方案本篇实践以小程序“评价组件”为引用示例。 小程序管理后台安装插件1. 前往小程序官方管理后台安装插件，如下图所示，查看“体验评价”组件接口文档。 [图片]2. 在评价组件接口文档中获取组件appid，文档中示例部分即为评价组件真实appid。 [图片] 3. 在小程序管理后台的“设置-第三方服务-插件管理”中添加插件。 [图片]4. 添加插件：通过 appid 查找插件并添加。 [图片]5. 如果插件无需申请，添加后可直接使用；否则需要申请并等待插件开发者通过后，方可在小程序中使用相应的插件。 [图片]微搭中引入插件 1. 微搭中构建应用场景，按钮组件绑定跳转事件，前往评价页面。 [图片]2. 评价页面需修改全局配置文件以及绑定页面加载自定义方法[代码]function1[代码]。 [图片] 3. 全局配置文件引入“评价组件”。 [图片] "plugins": { "wxacommentplugin": { "version": "latest", "provider": "wx82e6ae1175f264fa" // 评价组件appid } } 4. 页面加载自定义方法[代码]function1，[代码]调用评价组件接口。 [图片] export default function({event, data}) { var plugin = requirePlugin("wxacommentplugin"); plugin.openComment({ success: (res) => { console.log('plugin.openComment success', res) }, fail: (res) => { console.log('plugin.openComment fail', res) } }) } 真机效果演示1.发布应用，真机效果下评价交互过程展示。 [图片] [图片] [图片] 2.小程序管理后台评价记录展示。 [图片]

微信小程序设计指南BW_0_Alpha_0.9 黑 BW_0_Alpha_0.5 黑 Black_Opacity_30 黑 Black_Opacity_15 黑 Black_Opacity_10 黑 上述 BW 0 是什么意思，还希望大佬们解释下。

小程序原生的switch不能灵活的修改宽高、样式，很不方便，我这边参考WeUI的开关，写了一个可以自定义尺寸样式的switch组件。 直接上代码：https://gitee.com/piscdong/wechat-switch 效果如下图，可以自定义宽高，可以做成方角的 [图片] 代码分析 这个switch主要的难点就是点击后背景颜色变换的动画，这里用到了css的transition、transform两个属性来实现动画，以及::before和::after两个伪元素。 wxml基本结构为： [代码]<view class="switch"> <view></view> </view> [代码] 父级view是整个switch容器，会用到::before做背景色切换动画，::after做禁用时的灰色遮罩。内部的一个view是来回切换的白点。未选中时默认class是switch，选中时增加一个class：switch_checked。 选中状态到未选中状态背景有一个从中间变大到全部的白色动画，所以需要给父级view设置一个颜色作为背景色。 [代码].switch { ... background: #00c000; position: relative; } [代码] 未选中时::before覆盖整个容器，选中时::before设置[代码]transform: scale(0);[代码]，这样选中时白色区域就会缩放到最小，再加上transition实现动画效果。 [代码].switch::before { display: block; content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 9999rpx; background: #fff; transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1); } .switch_checked::before { transform: scale(0); } [代码] 来回移动的白点，未选中时通过[代码]left: 0;[代码]定位到左侧，选中时将left设置为100%定位到右侧，但是这样白点会完全移出容器范围，所以还需要加上[代码]transform: translateX(-100%);[代码]将白点向左再一定自身宽度的100%，同样加上transition实现动画效果。 [代码].switch view { position: absolute; top: 0; left: 0; width: 60rpx; height: 60rpx; border-radius: 50%; background: #fff; box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.4); transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1); } .switch_checked view { left: 100%; transform: translateX(-100%); } [代码] 关于“::” 最后搭车说一下“:”和“::”，“:”是伪类，“::”是伪元素。按照我的理解：伪类不会在dom中增加节点，只不过是css选择器的一种特殊效果；伪元素会增加节点，flex布局中会影响到其他元素。 为了保证兼容性，css3是允许伪元素使用单个冒号。

1、目前官方已经支持到暗黑模式，全局配置也支持了如图 [图片] 2、大部分时候，通过全局配置能够完成暗黑模式 3、目前用的暗黑模式，可以参考之前的文章： 喂饭系列：暗黑模式（主题切换同理、taro同理）设置 4、探讨部分，目前暗黑模式的局限性： 4.1 使用小程序提供的暗黑模式： 优点：省心 缺点： 如果需要自定义颜色，仍旧需要自己写 无法手动切换暗黑模式，只能跟随系统 4.2 自定义暗黑模式 优点：自定义程度高，可以手动切换 缺点： 需要用自定义导航栏，否则使用 wx.setNavigationBarColor 切换过程中会闪一下 综上： 1、如果需要更好的体验，还是得自定义暗黑模式，只是需要更多精力去完善 2、如果不需要手动切换暗黑模式，则用小程序自带的，体验最佳

大家好，上次给大家分享了swiper多图片的解决方案：https://developers.weixin.qq.com/community/develop/article/doc/0008aa4fdbce08405c288f37951813 今天再给大家分享一个关于swiper的小技巧，利用swiper仿tab切换。 相信大家在app或浏览器上阅读新闻时，比如今日头条，会有这样一个场景，左右滑动的时候可以切换不同栏目，体验非常好，但是小程序好像没有提供相关组件，如果想实现这种效果该怎么做呢今天就给大家介绍一下在小程序里是怎么实现的。 首先先看下效果 [图片] 实现原理很简单，利用小程序swiper再配合scroll-view就能实现，不过这里面有几点需要注意一下： 1.scroll-view一定要给一个高度，不然会有问题； 2.切换的时候只显示当前的swiper-item里的内容，其它swiper-item里的内容可以先隐藏掉，这是因为如果你的swiper-item里的图片太多的话可能会造成页面回收，因为新闻列表大多是图文列表，而tab经常是不止两个的，可能是7、8个或更多，如果每个tab都显示的话到时上拉加载页面会非常庞大，所以这里我建议不用显示的内容先隐藏，记住是swiper-item里的内容不是swiper-item，到时切换回来时再重新渲染，如果你要保存滚动的位置还要做其它的一些处理，这里就不仔细讲解了； 3.这里适用的是整个页面都是tab切换的，如果只是在页面的某处实现tab切换，还要考虑高度的问题，加载数据的时候根据数据个数长度来计算高度，每次加载数据都要计算高度，切换到不同的tab也是，这部分比较麻烦，因为要计算，不过并不难，只要 计算正确的话是没有问题的； 大概就是这样，基本实现思路，大家可以根据这个思路去拓展，在上面加上自己的功能，over！ 代码片段：https://developers.weixin.qq.com/s/89OO1smX736d

项目的主题颜色是黑色的 [图片] 文字需要竖着输入 不能用input 现在需要修改editor组件里placeholder的样式,要怎么做?

我想在一个表单页面中使用2个富文本编辑器   但是我去修改字体或者格式的时候  修改的都时最后一个的内容 部分代码片段https://developers.weixin.qq.com/s/s0BbBEmY7pdR

[图片][图片]

page-container 弹出层不能覆盖所在页面中的input组件，设置了很大的 z-index 依然无效

作为前端的设计师和工程师，我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画，但我们经常做的不过如此。 [代码] 动效是一个有助于访客和用户理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。 迪士尼经过基础工作练习的长时间累积，在 1981 年出版的 The Illusion of Life: Disney Animation 一书中发表了动画的十二个原则 ([] (https://en.wikipedia.org/wiki/12_basic_principles_of_animation)) 。这些原则描述了动画能怎样用于让观众相信自己沉浸在现实世界中。 [代码] 在本文中，我会逐个介绍这十二个原则，并讨论它们怎样运用在网页中。你能在 Codepen 找到它们[] (https://codepen.io/collection/AxKOdY/)。 挤压和拉伸 (Squash and stretch) [图片] 这是物体存在质量且运动时质量保持不变的概念。当一个球在弹跳时，碰击到地面会变扁，恢复的时间会越来越短。 [代码] 创建对象的时候最有用的方法是参照实物，比如人、时钟和弹性球。 当它和网页元件一起工作时可能会忽略这个原则。DOM 对象不一定和实物相关，它会按需要在屏幕上缩放。例如，一个按钮会变大并变成一个信息框，或者错误信息会出现和消失。 尽管如此，挤压和伸缩效果可以为一个对象增加实物的感觉。甚至一些形状上的小变化就可以创造出细微但抢眼的效果。 HTML [代码] [代码] <h1>Principle 1: Squash and stretch</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle one"> <div class="shape"></div> <div class="surface"></div> </article> [代码] CSS [代码].one .shape { animation: one 4s infinite ease-out; } .one .surface { background: #000; height: 10em; width: 1em; position: absolute; top: calc(50% - 4em); left: calc(50% + 10em); } @keyframes one { 0%, 15% { opacity: 0; } 15%, 25% { transform: none; animation-timing-function: cubic-bezier(1,-1.92,.95,.89); width: 4em; height: 4em; top: calc(50% - 2em); left: calc(50% - 2em); opacity: 1; } 35%, 45% { transform: translateX(8em); height: 6em; width: 2em; top: calc(50% - 3em); animation-timing-function: linear; opacity: 1; } 70%, 100% { transform: translateX(8em) translateY(5em); height: 6em; width: 2em; top: calc(50% - 3em); opacity: 0; } } body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 预备动作 (Anticipation) [图片] 运动不倾向于突然发生。在现实生活中，无论是一个球在掉到桌子前就开始滚动，或是一个人屈膝准备起跳，运动通常有着某种事先的累积。 [代码] 我们能用它去让我们的过渡动画显得更逼真。预备动作可以是一个细微的反弹，帮人们理解什么对象将在屏幕中发生变化并留下痕迹。 例如，悬停在一个元件上时可以在它变大前稍微缩小，在初始列表中添加额外的条目来介绍其它条目的移除方法。 [代码] HTML [代码]<h1>Principle 2: Anticipation</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle two"> <div class="shape"></div> <div class="surface"></div> </article> [代码] CSS [代码].two .shape { animation: two 5s infinite ease-out; transform-origin: 50% 7em; } .two .surface { background: #000; width: 8em; height: 1em; position: absolute; top: calc(50% + 4em); left: calc(50% - 3em); } @keyframes two { 0%, 15% { opacity: 0; transform: none; } 15%, 25% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.5,.05,.91,.47); } 28%, 38% { transform: translateX(-2em); } 40%, 45% { transform: translateX(-4em); } 50%, 52% { transform: translateX(-4em) rotateZ(-20deg); } 70%, 75% { transform: translateX(-4em) rotateZ(-10deg); } 78% { transform: translateX(-4em) rotateZ(-24deg); opacity: 1; } 86%, 100% { transform: translateX(-6em) translateY(4em) rotateZ(-90deg); opacity: 0; } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 演出布局 (Staging) [图片] 演出布局是确保对象在场景中得以聚焦，让场景中的其它对象和视觉在主动画发生的地方让位。这意味着要么把主动画放到突出的位置，要么模糊其它元件来让用户专注于看他们需要看的东西。 [代码] 在网页方面，一种方法是用 model 覆盖在某些内容上。在现有页面添加一个遮罩并把那些主要关注的内容前置展示。 另一种方法是用动作。当很多对象在运动，你很难知道哪些值得关注。如果其它所有的动作停止，只留一个在运动，即使动得很微弱，这都可以让对象更容易被察觉。 [代码] 还有一种方法是做一个晃动和闪烁的按钮来简单地建议用户比如他们可能要保存文档。屏幕保持静态，所以再细微的动作也会突显出来。 HTML [代码]<h1>Principle 3: Staging</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle three"> <div class="shape a"></div> <div class="shape b"></div> <div class="shape c"></div> </article> [代码] CSS [代码].three .shape.a { transform: translateX(-12em); } .three .shape.c { transform: translateX(12em); } .three .shape.b { animation: three 5s infinite ease-out; transform-origin: 0 6em; } .three .shape.a, .three .shape.c { animation: threeb 5s infinite linear; } @keyframes three { 0%, 10% { transform: none; animation-timing-function: cubic-bezier(.57,-0.5,.43,1.53); } 26%, 30% { transform: rotateZ(-40deg); } 32.5% { transform: rotateZ(-38deg); } 35% { transform: rotateZ(-42deg); } 37.5% { transform: rotateZ(-38deg); } 40% { transform: rotateZ(-40deg); } 42.5% { transform: rotateZ(-38deg); } 45% { transform: rotateZ(-42deg); } 47.5% { transform: rotateZ(-38deg); animation-timing-function: cubic-bezier(.57,-0.5,.43,1.53); } 58%, 100% { transform: none; } } @keyframes threeb { 0%, 20% { filter: none; } 40%, 50% { filter: blur(5px); } 65%, 100% { filter: none; } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 连续运动和姿态对应 (Straight-Ahead Action and Pose-to-Pose) [图片] 连续运动是绘制动画的每一帧，姿态对应是通常由一个 assistant 在定义一系列关键帧后填充间隔。 [代码] 大多数网页动画用的是姿态对应：关键帧之间的过渡可以通过浏览器在每个关键帧之间的插入尽可能多的帧使动画流畅。 [代码] 有一个例外是定时功能step。通过这个功能，浏览器 “steps” 可以把尽可能多的无序帧串清晰。你可以用这种方式绘制一系列图片并让浏览器按顺序显示出来，这开创了一种逐帧动画的风格。 HTML [代码]<h1>Principle 4: Straight Ahead Action and Pose to Pose</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle four"> <div class="shape a"></div> <div class="shape b"></div> </article> [代码] CSS [代码].four .shape.a { left: calc(50% - 8em); animation: four 6s infinite cubic-bezier(.57,-0.5,.43,1.53); } .four .shape.b { left: calc(50% + 8em); animation: four 6s infinite steps(1); } @keyframes four { 0%, 10% { transform: none; } 26%, 30% { transform: rotateZ(-45deg) scale(1.25); } 40% { transform: rotateZ(-45deg) translate(2em, -2em) scale(1.8); } 50%, 75% { transform: rotateZ(-45deg) scale(1.1); } 90%, 100% { transform: none; } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 跟随和重叠动作 (Follow Through and Overlapping Action) [图片] 事情并不总在同一时间发生。当一辆车从急刹到停下，车子会向前倾、有烟从轮胎冒出来、车里的司机继续向前冲。 [代码] 这些细节是跟随和重叠动作的例子。它们在网页中能被用作帮助强调什么东西被停止，并不会被遗忘。例如一个条目可能在滑动时稍滑微远了些，但它自己会纠正到正确位置。 要创造一个重叠动作的感觉，我们可以让元件以稍微不同的速度移动到每处。这是一种在 iOS 系统的视窗 (View) 过渡中被运用得很好的方法。一些按钮和元件以不同速率运动，整体效果会比全部东西以相同速率运动要更逼真，并留出时间让访客去适当理解变化。 [代码] 在网页方面，这可能意味着让过渡或动画的效果以不同速度来运行。 HTML [代码]<h1>Principle 5: Follow Through and Overlapping Action</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle five"> <div class="shape-container"> <div class="shape"></div> </div> </article> [代码] CSS [代码].five .shape { animation: five 4s infinite cubic-bezier(.64,-0.36,.1,1); position: relative; left: auto; top: auto; } .five .shape-container { animation: five-container 4s infinite cubic-bezier(.64,-0.36,.1,2); position: absolute; left: calc(50% - 4em); top: calc(50% - 4em); } @keyframes five { 0%, 15% { opacity: 0; transform: translateX(-12em); } 15%, 25% { transform: translateX(-12em); opacity: 1; } 85%, 90% { transform: translateX(12em); opacity: 1; } 100% { transform: translateX(12em); opacity: 0; } } @keyframes five-container { 0%, 35% { transform: none; } 50%, 60% { transform: skewX(20deg); } 90%, 100% { transform: none; } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 缓入缓出 (Slow In and Slow Out) [图片] 对象很少从静止状态一下子加速到最大速度，它们往往是逐步加速并在停止前变慢。没有加速和减速，动画感觉就像机器人。 [代码] 在 CSS 方面，缓入缓出很容易被理解，在一个动画过程中计时功能是一种描述变化速率的方式。 [代码] 使用计时功能，动画可以由慢加速 (ease-in)、由快减速 (ease-out)，或者用贝塞尔曲线做出更复杂的效果。 HTML [代码]<h1>Principle 6: Slow in and Slow out</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle six"> <div class="shape a"></div> </article> [代码] CSS [代码].six .shape { animation: six 3s infinite cubic-bezier(0.5,0,0.5,1); } @keyframes six { 0%, 5% { transform: translate(-12em); } 45%, 55% { transform: translate(12em); } 95%, 100% { transform: translate(-12em); } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 弧线运动 (Arc) [图片] 虽然对象是更逼真了，当它们遵循「缓入缓出」的时候它们很少沿直线运动——它们倾向于沿弧线运动。 我们有几种 CSS 的方式来实现弧线运动。一种是结合多个动画，比如在弹力球动画里，可以让球上下移动的同时让它右移，这时候球的显示效果就是沿弧线运动。 HTML [代码]<h1>Principle 7: Arc (1)</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle sevena"> <div class="shape-container"> <div class="shape a"></div> </div> </article> [代码] CSS [代码].sevena .shape-container { animation: move-right 6s infinite cubic-bezier(.37,.55,.49,.67); position: absolute; left: calc(50% - 4em); top: calc(50% - 4em); } .sevena .shape { animation: bounce 6s infinite linear; border-radius: 50%; position: relative; left: auto; top: auto; } @keyframes move-right { 0% { transform: translateX(-20em); opacity: 1; } 80% { opacity: 1; } 90%, 100% { transform: translateX(20em); opacity: 0; } } @keyframes bounce { 0% { transform: translateY(-8em); animation-timing-function: cubic-bezier(.51,.01,.79,.02); } 15% { transform: translateY(8em); animation-timing-function: cubic-bezier(.19,1,.7,1); } 25% { transform: translateY(-4em); animation-timing-function: cubic-bezier(.51,.01,.79,.02); } 32.5% { transform: translateY(8em); animation-timing-function: cubic-bezier(.19,1,.7,1); } 40% { transform: translateY(0em); animation-timing-function: cubic-bezier(.51,.01,.79,.02); } 45% { transform: translateY(8em); animation-timing-function: cubic-bezier(.19,1,.7,1); } 50% { transform: translateY(3em); animation-timing-function: cubic-bezier(.51,.01,.79,.02); } 56% { transform: translateY(8em); animation-timing-function: cubic-bezier(.19,1,.7,1); } 60% { transform: translateY(6em); animation-timing-function: cubic-bezier(.51,.01,.79,.02); } 64% { transform: translateY(8em); animation-timing-function: cubic-bezier(.19,1,.7,1); } 66% { transform: translateY(7.5em); animation-timing-function: cubic-bezier(.51,.01,.79,.02); } 70%, 100% { transform: translateY(8em); animation-timing-function: cubic-bezier(.19,1,.7,1); } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] [图片] 另外一种是旋转元件，我们可以设置一个在对象之外的原点来作为它的旋转中心。当我们旋转这个对象，它看上去就是沿着弧线运动。 HTML [代码]<h1>Principle 7: Arc (2)</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle sevenb"> <div class="shape a"></div> <div class="shape b"></div> </article> [代码] CSS [代码].sevenb .shape.a { animation: sevenb 3s infinite linear; top: calc(50% - 2em); left: calc(50% - 9em); transform-origin: 10em 50%; } .sevenb .shape.b { animation: sevenb 6s infinite linear reverse; background-color: yellow; width: 2em; height: 2em; left: calc(50% - 1em); top: calc(50% - 1em); } @keyframes sevenb { 100% { transform: rotateZ(360deg); } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 次要动作 (Secondary Action) [图片] 虽然主动画正在发生，次要动作可以增强它的效果。这就好比某人在走路的时候摆动手臂和倾斜脑袋，或者弹性球弹起的时候扬起一些灰尘。 在网页方面，当主要焦点出现的时候就可以开始执行次要动作，比如拖拽一个条目到列表中间。 HTML [代码]<h1>Principle 8: Secondary Action</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle eight"> <div class="shape a"></div> <div class="shape b"></div> <div class="shape c"></div> </article> [代码] CSS [代码].eight .shape.a { transform: translateX(-6em); animation: eight-shape-a 4s cubic-bezier(.57,-0.5,.43,1.53) infinite; } .eight .shape.b { top: calc(50% + 6em); opacity: 0; animation: eight-shape-b 4s linear infinite; } .eight .shape.c { transform: translateX(6em); animation: eight-shape-c 4s cubic-bezier(.57,-0.5,.43,1.53) infinite; } @keyframes eight-shape-a { 0%, 50% { transform: translateX(-5.5em); } 70%, 100% { transform: translateX(-10em); } } @keyframes eight-shape-b { 0% { transform: none; } 20%, 30% { transform: translateY(-1.5em); opacity: 1; animation-timing-function: cubic-bezier(.57,-0.5,.43,1.53); } 32% { transform: translateY(-1.25em); opacity: 1; } 34% { transform: translateY(-1.75em); opacity: 1; } 36%, 38% { transform: translateY(-1.25em); opacity: 1; } 42%, 60% { transform: translateY(-1.5em); opacity: 1; } 75%, 100% { transform: translateY(-8em); opacity: 1; } } @keyframes eight-shape-c { 0%, 50% { transform: translateX(5.5em); } 70%, 100% { transform: translateX(10em); } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 时间节奏 (Timing) [图片] 动画的时间节奏是需要多久去完成，它可以被用来让看起来很重的对象做很重的动画，或者用在添加字符的动画中。 [代码] 这在网页上可能只要简单调整 animation-duration 或 transition-duration 值。 [代码] 这很容易让动画消耗更多时间，但调整时间节奏可以帮动画的内容和交互方式变得更出众。 HTML [代码]<h1>Principle 9: Timing</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle nine"> <div class="shape a"></div> <div class="shape b"></div> </article> [代码] CSS [代码].nine .shape.a { animation: nine 4s infinite cubic-bezier(.93,0,.67,1.21); left: calc(50% - 12em); transform-origin: 100% 6em; } .nine .shape.b { animation: nine 2s infinite cubic-bezier(1,-0.97,.23,1.84); left: calc(50% + 2em); transform-origin: 100% 100%; } @keyframes nine { 0%, 10% { transform: translateX(0); } 40%, 60% { transform: rotateZ(90deg); } 90%, 100% { transform: translateX(0); } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 夸张手法 (Exaggeration) [图片] 夸张手法在漫画中是最常用来为某些动作刻画吸引力和增加戏剧性的，比如一只狼试图把自己的喉咙张得更开地去咬东西可能会表现出更恐怖或者幽默的效果。 在网页中，对象可以通过上下滑动去强调和刻画吸引力，比如在填充表单的时候生动部分会比收缩和变淡的部分更突出。 HTML [代码]<h1>Principle 10: Exaggeration</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle ten"> <div class="shape"></div> </article> [代码] CSS [代码].ten .shape { animation: ten 4s infinite linear; transform-origin: 50% 8em; top: calc(50% - 6em); } @keyframes ten { 0%, 10% { transform: none; animation-timing-function: cubic-bezier(.87,-1.05,.66,1.31); } 40% { transform: rotateZ(-45deg) scale(2); animation-timing-function: cubic-bezier(.16,.54,0,1.38); } 70%, 100% { transform: rotateZ(360deg) scale(1); } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 扎实的描绘 (Solid drawing) [图片] 当动画对象在三维中应该加倍注意确保它们遵循透视原则。因为人们习惯了生活在三维世界里，如果对象表现得与实际不符，会让它看起来很糟糕。 如今浏览器对三维变换的支持已经不错，这意味着我们可以在场景里旋转和放置三维对象，浏览器能自动控制它们的转换。 HTML [代码]<h1>Principle 11: Solid drawing</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle eleven"> <div class="shape"> <div class="container"> <span class="front"></span> <span class="back"></span> <span class="left"></span> <span class="right"></span> <span class="top"></span> <span class="bottom"></span> </div> </div> </article> [代码] CSS [代码].eleven .shape { background: none; border: none; perspective: 400px; perspective-origin: center; } .eleven .shape .container { animation: eleven 4s infinite cubic-bezier(.6,-0.44,.37,1.44); transform-style: preserve-3d; } .eleven .shape span { display: block; position: absolute; opacity: 1; width: 4em; height: 4em; border: 1em solid #fff; background: #2d97db; } .eleven .shape span.front { transform: translateZ(3em); } .eleven .shape span.back { transform: translateZ(-3em); } .eleven .shape span.left { transform: rotateY(-90deg) translateZ(-3em); } .eleven .shape span.right { transform: rotateY(-90deg) translateZ(3em); } .eleven .shape span.top { transform: rotateX(-90deg) translateZ(-3em); } .eleven .shape span.bottom { transform: rotateX(-90deg) translateZ(3em); } @keyframes eleven { 0% { opacity: 0; } 10%, 40% { transform: none; opacity: 1; } 60%, 75% { transform: rotateX(-20deg) rotateY(-45deg) translateY(4em); animation-timing-function: cubic-bezier(1,-0.05,.43,-0.16); opacity: 1; } 100% { transform: translateZ(-180em) translateX(20em); opacity: 0; } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码] 吸引力 (Appeal) [图片] 吸引力是艺术作品的特质，让我们与艺术家的想法连接起来。就像一个演员身上的魅力，是注重细节和动作相结合而打造吸引性的结果。 [代码] 精心制作网页上的动画可以打造出吸引力，例如 Stripe 这样的公司用了大量的动画去增加它们结账流程的可靠性。 [代码] HTML [代码]<h1>Principle 12: Appeal</h1> <h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2> <article class="principle twelve"> <div class="shape"> <div class="container"> <span class="item one"></span> <span class="item two"></span> <span class="item three"></span> <span class="item four"></span> </div> </div> </article> [代码] CSS [代码].twelve .shape { background: none; border: none; perspective: 400px; perspective-origin: center; } .twelve .shape .container { animation: show-container 8s infinite cubic-bezier(.6,-0.44,.37,1.44); transform-style: preserve-3d; width: 4em; height: 4em; border: 1em solid #fff; background: #2d97db; position: relative; } .twelve .item { background-color: #1f7bb6; position: absolute; } .twelve .item.one { animation: show-text 8s 0.1s infinite ease-out; height: 6%; width: 30%; top: 15%; left: 25%; } .twelve .item.two { animation: show-text 8s 0.2s infinite ease-out; height: 6%; width: 20%; top: 30%; left: 25%; } .twelve .item.three { animation: show-text 8s 0.3s infinite ease-out; height: 6%; width: 50%; top: 45%; left: 25%; } .twelve .item.four { animation: show-button 8s infinite cubic-bezier(.64,-0.36,.1,1.43); height: 20%; width: 40%; top: 65%; left: 30%; } @keyframes show-container { 0% { opacity: 0; transform: rotateX(-90deg); } 10% { opacity: 1; transform: none; width: 4em; height: 4em; } 15%, 90% { width: 12em; height: 12em; transform: translate(-4em, -4em); opacity: 1; } 100% { opacity: 0; transform: rotateX(-90deg); width: 4em; height: 4em; } } @keyframes show-text { 0%, 15% { transform: translateY(1em); opacity: 0; } 20%, 85% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateY(-1em); animation-timing-function: cubic-bezier(.64,-0.36,.1,1.43); } } @keyframes show-button { 0%, 25% { transform: scale(0); opacity: 0; } 35%, 80% { transform: none; opacity: 1; } 90%, 100% { opacity: 0; transform: scale(0); } } /* General styling */ body { margin: 0; background: #e9b59f; font-family: HelveticaNeue, Arial, Sans-serif; color: #fff; } h1 { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 300; } h2 { font-size: 0.75em; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } a { text-decoration: none; color: #333; } .principle { width: 100%; height: 100vh; position: relative; } .shape { background: #2d97db; border: 1em solid #fff; width: 4em; height: 4em; position: absolute; top: calc(50% - 2em); left: calc(50% - 2em); } [代码]

页面上要放一个拨打客服电话的可拖动图标，但是可拖动区域会导致页面内容被遮盖，怎么解决 movable-area {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%; } movable-view {    position: absolute;    top: auto;    left: auto;    bottom: 20rpx;    right: 20rpx;    width: 98rpx;    height: 98rpx; }

 在微信小程序的前端开发中，使用this.setData方法修改data中的值，其格式为 this.setData({    '参数名1': 值1,    '参数名2': 值2 )}     需要注意的是，如果是简单变量，这里的参数名可以不加引号。     经过测试，可以使用3种方式对data中的对象、数组中的数据进行修改。 假设原数据为： data: { user_info:{ name: 'li', age: 10     },     cars:['nio', 'bmw', 'wolks'] },      方式一：      使用['字符串']，例如 this.setData({       ['user_info.age']: 20, ['cars[0]']: 'tesla' }) 方式二：     构造变量，重新赋值，例如     var temp = this.data.user_info     temp.age = 30      this.setData({ user_info: temp     })     var temp = this.data.cars     temp[0] = 'volvo'      this.setData({ cars: temp }) 方式三：      直接使用字符串，此种方式之前不可以，现在可以了，估计小程序库升级了。     注意和第一种方法的对比，推荐还是使用第一种方法。 this.setData({       'user_info.age': 40,       'cars[0]': 'ford' }) 完整代码： Page({ /** * 页面的初始数据 */ data: { user_info:{ name: 'li', age: 10 }, cars:['nio', 'bmw', 'wolks'] }, change_data: function(){     console.log('对象-修改前：', this.data.user_info)      this.setData({ ['user_info.age']: 20     }) console.log('对象-修改后1：', this.data.user_info)     var temp = this.data.user_info     temp.age = 30 this.setData({ user_info: temp     }) console.log('对象-修改后2：', this.data.user_info) this.setData({ 'user_info.age': 40     }) console.log('对象-修改后3：', this.data.user_info)     console.log('数组-修改前：', this.data.cars)      this.setData({ ['cars[0]']: 'tesla'     }) console.log('数组-修改后1：', this.data.cars)     var temp = this.data.cars     temp[0] = 'volvo' this.setData({ cars: temp     }) console.log('数组-修改后2：', this.data.cars) this.setData({ 'cars[0]': 'ford'     }) console.log('数组-修改后3：', this.data.cars)   } }) 效果： [图片]

先来看看效果 快速拖拽排序测试演示视频地址：https://v.qq.com/x/page/r3207k4fxe1.html 完整拖拽排序效果演示视频地址：https://v.qq.com/x/page/y3207g6agur.html [图片] 采用技术：uni-app 接下来分析分析实现该效果所需要用到的标签 元素是通过拖拽进行排序的，此处采用的是官方出的 <movable-area> <movable-view> 两位标签大佬解决移动的问题 (主要是相信官方支持的动画会比自己搞更加丝滑一些)。支持拖拽到上下边界，检查可视区域的位置并自动进行滚动, 此处就需要我们的 <scroll-view> 标签大佬坐镇了。标签的选择搞定了，再来了解了解这些标签要用到的重点属性 movable-view 想要移动就必须作为 movable-area 的直接子元素，且 movable-area 必须设置 width，height 属性 (还有些提示可以查看文档)。movable-view 的 x, y 属性决定了 movable-view 再 movable-area 所处的位置 (是不是猜出了要搞些什么东东了)scroll-view 滚动到指定位置可以通过控制 scroll-top 的属性值来进行控制滚动 接下来就是怎么个实现思路，先来捋捋实现的步骤 列表该如何渲染如何控制拖拽元素的跟随如何使拖拽中的元素与相交互的元素进行位置调换如何判断拖拽元素至上下边界滚动屏幕如何使页面的滚动与拖拽时的滚动互不影响 描述完宏观的蓝图,接下来就是代码小细节,客官请随我来 一、解决列表渲染问题 /** * 上面说到 movable-view 可以通过 x,y 决定它的位置, 且 movable-area 需要设置 widht，height 属性 * 配置完这些属性 movable-view 就可以再 movable-area 愉快的拖拽玩耍了 * 思路: * 1. 通过列表的数量乘于显示列表项的高度得出最终可拖拽区域的总高度,赋值给 movable-area * 2. 扩展列表项一些字段，此处使用 y 保存当前项距离顶部位置, idx 保存当前项所在列表的下标 / // 伪代码 // js initList(list) { this.areaHeight = list.length * this.height; // aeraHieght 可拖拽区域总高度, height 为元素所需高度 this.internalList = list.map((item, idx) => { return { ...item,  y: idx * this.height, // movable-view 当前项所处的高度 idx: idx, // 当前项所处于列表的下标，用于比较 animation: true, // 主要用于控制拖拽的元素要关闭动画, 其他的元素可以保留动画 } }) } // html  二、 如何控制拖拽元素的跟随 // 主要是通过监听 movable-view 的 touchstart touchmove touchend 三个事件完成拖拽动作的起始、移动、结束。 // methods { _dragStart(e){  // 取得触摸点距离行顶部距离   this.deviationY = (e.mp.touches[0].clientY - this.wrap.top) % this.height;     this.internalList[idx].animation = false; // 关闭当前拖拽元素的动画属性     this.activeIdx = idx; // 保存当前拖拽元素的下标   }, _dragMove(e) {   const activeItem = this.internalList[this.activeIdx];     if (!activeItem) return;   // 实时取得触摸点的位置信息     const clientY = e.mp.touches[0].clientY;     let touchY = clientY - this.wrap.top - this.deviationY + this.scrollTop;     if (touchY <= 0 || touchY + this.height >= this.areaHeight) return;     activeItem.y = touchY; // 拖拽元素的移动秘密就在于此 } } 三、如何使拖拽中的元素与相交互的元素进行位置调换 // 上述代码解决了当前拖拽元素的位置移动问题, 接下来就需要解决拖拽元素和上下元素交互的问题 // methods { __dragMove(e){ // ...同上代码一致 // 上下元素交互位置代码实现   for(let item of this.internalList) { if (item.idx !== activeItem.idx) { if (item.idx > activeItem.idx) { // 如果当前元素下标大于拖拽元素下标，则检查当前拖拽位置是否大于当前元素中心点 if (touchY > item.idx * this.height - this.height / 2) { [activeItem.idx, item.idx] = [item.idx, activeItem.idx]; // 对调位置 item.y = item.idx * this.height; // 更新对调后的位置 break; // 退出循环 } } else { // 如果当前元素下标小于拖拽元素下标，则检查当前拖拽位置是否小于当前元素中心点 if (touchY < item.idx * this.height + this.height / 2) { [activeItem.idx, item.idx] = [item.idx, activeItem.idx]; item.y = item.idx * this.height; break; } } } } } } 四、如何判断拖拽元素至上下边界滚动屏幕 // 将 movable-area 包裹在 scroll-view 标签中, 通过控制 scroll-top 的值来进行滚动 // 思路: 判断当前拖拽元素的位置信息与当前屏幕可视区域进行比较 // methods { _dragMove(e) { // ...同上代码 // 检查当前位置是否处于可视区域 if (activeItem.idx + 1 * this.height + this.height / 2 > this.scrollTop + this.wrap.top) { this.viewTop = this.scrollTop + this.height; // 往上滚动一个元素的高度 } else if (activeItem.idx * this.height - this.height / 2 < this.scrollTop ) { this.viewTop = this.scrollTop - this.height; // 往下滚动一个元素的高度 } } } 五、如何使页面的滚动与拖拽时的滚动互不影响 // 事实上我是通过一种取巧的方式, scroll-veiw 有一个 scroll-y 属性可以控制滚动方向 // 思路: // 1.不进行滚动的时候将 scroll-y 置为 true , 使用默认的滚动效果 // 2.当进入拖拽排序状态时则将 scroll0y 置为 false, 滚动通过拖拽代码比较计算滚动位置 完整代码： 主要小程序上的插槽不允许往外传值、所以自定义元素实现的方式相比于H5实现Vue的方式比较别扭。 因为有多个地方需要用到排序功能，所以边抽离了 js 部分进行混入。 // DargSortMixin.js 文件 export default {     props: {         list: {             type: Array,             default() {                 return [];             },         },         sort: {             type: Boolean,             default: false,         },         height: {             type: Number,             default: 66,         },     },     data() {         return {             areaHeight: 0, // 区域总高度             internalList: [], // 列表             activeIdx: -1, // 移动中激活项             deviationY: 0, // 偏移量             // 包裹容器信息             wrap: {                 top: 0,                 height: 0,             },             viewTop: 0, // 指定滚动高度             scrollTop: 0, // 容器实时滚动高度             scrollWithAnimation: false,             canScroll: true,         };     },     created() {         // 组件使用选择器，需用使用this         const query = this.createSelectorQuery();         query             .select('#scroll-wrap')             .boundingClientRect(rect => {                 if (rect) {                     this.wrap = {                         top: rect.top,                         height: rect.height,                     };                 }             })             .exec();     },     watch: {         list: {             handler(val) {                 this.initList(val);             },             immediate: true,         },     },     methods: {         getList() {             return this.internalList                 .sort((a, b) => {                     return a.idx - b.idx;                 })                 .map(item => {                     let newItem = { ...item };                     delete newItem.y;                     delete newItem.idx;                     delete newItem.animation;                     return newItem;                 });         },         initList(list) {             this.areaHeight = list.length * this.height;             this.internalList = list.map((item, idx) => {                 return {                     ...item,                     y: idx * this.height,                     idx,                     animation: true,                 };             });         },         _dragStart(e, idx) {             // 取得触摸点距离行顶部距离             this.deviationY = (e.mp.touches[0].clientY - this.wrap.top) % this.height;             this.internalList[idx].animation = false; // 关闭动画             this.activeIdx = idx;             this.scrollWithAnimation = true;             this.canScroll = false;         },         _dragMove(e) {             const activeItem = this.internalList[this.activeIdx];             if (!activeItem) return;             // 保存触摸点位置和长按时中心一致             const clientY = e.mp.touches[0].clientY;             let touchY = clientY - this.wrap.top - this.deviationY + this.scrollTop;             if (touchY <= 0 || touchY + this.height >= this.areaHeight) return;             activeItem.y = touchY; // 设置位置             // 检查元素和上下交互元素的位置             for (const item of this.internalList) {                 if (item.idx !== activeItem.idx) {                     if (item.idx > activeItem.idx) {                         if (touchY > item.idx * this.height - this.height / 2) {                             [activeItem.idx, item.idx] = [item.idx, activeItem.idx]; // 对调位置                             item.y = item.idx * this.height; // 更新位置                             break;                         }                     } else {                         if (touchY < item.idx * this.height + this.height / 2) {                             [activeItem.idx, item.idx] = [item.idx, activeItem.idx]; // 对调位置                             item.y = item.idx * this.height; // 更新位置                             break;                         }                     }                 }             }             // 检查当前位置是否处于可视区域             if (                 (activeItem.idx + 1) * this.height + this.height / 2 >                 this.scrollTop + this.wrap.height             ) {                 this.canScroll = true;                 activeItem.y = activeItem.idx * this.height;                 this.$nextTick(() => {                     this.viewTop = this.scrollTop + this.height;                 });             } else if (activeItem.idx * this.height - this.height / 2 < this.scrollTop) {                 this.canScroll = true;                 activeItem.y = activeItem.idx * this.height;                 this.$nextTick(() => {                     this.viewTop = this.scrollTop - this.height;                 });             }         },         _dragEnd(e) {             const activeItem = this.internalList[this.activeIdx];             if (!activeItem) return;             activeItem.animation = true;             activeItem.disabled = true;             activeItem.y = activeItem.idx * this.height;             this.activeIdx = -1;             this.scrollWithAnimation = false;             this.canScroll = true;         },         _onScroll(e) {             this.scrollTop = e.detail.scrollTop;         },     }, }; // TheDragSortAreaList.vue 文件 import DragSortMixin from '@/mixins/DragSortMixin'; export default {     name: 'TheDragSortTableList',     mixins: [DragSortMixin], };                                                                                                                                                                                                                                                                                                             .active-item {     z-index: 10; } .drag-item {     background: $theme-color;     color: $white !important;     .count {         color: $white !important;     } }

微信小程序 – 基于 movable-view 实现拖拽排序 项目基于[代码]colorui[代码]样式组件 ColorUI组件库 (color-ui.com) 1.实现效果 [图片] 2. 设计思路 movable-view 绑定块移动事件的 块[代码]ID[代码] ,块移动的坐标 移动结束后触发[代码]moveEnd[代码]事件，根据[代码]Y[代码]坐标对对象数组进行排序 根据排序结果重置块位置 3.实现代码 代码已经进行了最简化处理 图中效果实现需引入[代码]colorui[代码]的[代码]main.wxss[代码]样式部分。 wxml [代码]<movable-area class="padding text-center bg-grey" style="width:100%;height:500px;" > <movable-view class="radius shadow bg-white" style="width:80%;height:80px;z-index:{{index==moveId?2:1}}" wx:for="{{tabList}}" wx:key="index" x="{{item.x}}" y="{{item.y}}" direction="all" bindchange="moveStatus" bindtouchend='moveEnd' data-moveid="{{index}}"> {{item.name}}</movable-view> </movable-area> [代码] js [代码]var compare = function (obj1, obj2) { var val1 = obj1.y; var val2 = obj2.y; if (val1 < val2) { return -1; } else if (val1 >= val2) { return 1; } else { return 0; } } Page({ /** * 页面的初始数据 */ data: { branchid:'', appdocid:'', tabList:[ { name:'十步杀一人' }, { name:'千里不留行' }, { name:'事了拂衣去' }, { name:'深藏身与名' } ], //移动的是哪个元素块 moveId:null, //最终停止的位置 endX:0, endY:0 }, initMove(){ let tabList = this.data.tabList; var tarr = [] tabList.forEach(function(ele,index){ let obj = ele obj.id = index obj.x = 30 obj.y = 100*index +20 tarr.push(obj) }) console.log(tarr) this.setData({ tabList:tarr }) }, moveEnd(e){ console.log(e) var that = this; that.setData({ ["tabList["+that.data.moveId+"].x"]:that.data.endX, ["tabList["+that.data.moveId+"].y"]:that.data.endY },()=>{ let tabList = this.data.tabList; tabList = tabList.sort(compare); that.setData({ tabList },()=>{ setTimeout(function(){ that.initMove(); },500) }) }) //计算位置 }, moveStatus(e){ // console.log(e) //移动的块ID var moveid = e.currentTarget.dataset.moveid; //最终坐标 let x = e.detail.x let y = e.detail.y this.setData({ moveId:moveid, endX:x, endY:y }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { this.initMove(); } }) [代码] 4.参考文档 movable-view | 微信开放文档 (qq.com)

小程序列表拖拽排序 [图片] wxml [代码]<view class='listbox'> <view class='list kelong' hidden='{{!showkelong}}' style='top:{{kelong.top}}px'> <view class='index'>?</view> <image src='{{kelong.xt}}' class='xt'></image> <view class='info'> <view class="name">{{kelong.name}}</view> <view class='sub-name'>{{kelong.subname}}</view> </view> <image src='/images/sl_36.png' class='more'></image> </view> <view class='list' wx:for="{{optionList}}" wx:key=""> <view class='index'>{{index+1}}</view> <image src='{{item.xt}}' class='xt'></image> <view class='info'> <view class="name">{{item.name}}</view> <view class='sub-name'>{{item.subname}}</view> </view> <image src='/images/sl_36.png' class='more'></image> <view class='moreiconpl' data-index='{{index}}' catchtouchstart='dragStart' catchtouchmove='dragMove' catchtouchend='dragEnd'></view> </view> </view> [代码] wxss [代码].map-list .list { position: relative; height: 120rpx; } .map-list .list::after { content: ''; width: 660rpx; height: 2rpx; background-color: #eee; position: absolute; right: 0; bottom: 0; } .map-list .list .xt { display: block; width: 95rpx; height: 77rpx; position: absolute; left: 93rpx; top: 20rpx; } .map-list .list .more { display: block; width: 48rpx; height: 38rpx; position: absolute; right: 30rpx; top: 40rpx; } .map-list .list .info { display: block; width: 380rpx; height: 80rpx; position: absolute; left: 220rpx; top: 20rpx; font-size: 30rpx; } .map-list .list .info .sub-name { font-size: 28rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #646567; } .map-list .list .index { color: #e4463b; font-size: 32rpx; font-weight: bold; position: absolute; left: 35rpx; top: 40rpx; } [代码] js [代码]data：{ kelong: { top: 0, xt: '', name: '', subname: '' }, replace: { xt: '', name: '', subname: '' }, }, dragStart: function(e) { var that = this var kelong = that.data.kelong var i = e.currentTarget.dataset.index kelong.xt = this.data.optionList[i].xt kelong.name = this.data.optionList[i].name kelong.subname = this.data.optionList[i].subname var query = wx.createSelectorQuery(); //选择id query.select('.listbox').boundingClientRect(function(rect) { // console.log(rect.top) kelong.top = e.changedTouches[0].clientY - rect.top - 30 that.setData({ kelong: kelong, showkelong: true }) }).exec(); }, dragMove: function(e) { var that = this var i = e.currentTarget.dataset.index var query = wx.createSelectorQuery(); var kelong = that.data.kelong var listnum = that.data.optionList.length var optionList = that.data.optionList query.select('.listbox').boundingClientRect(function(rect) { kelong.top = e.changedTouches[0].clientY - rect.top - 30 if(kelong.top < -60) { kelong.top = -60 } else if (kelong.top > rect.height) { kelong.top = rect.height - 60 } that.setData({ kelong: kelong, }) }).exec(); }, dragEnd: function(e) { var that = this var i = e.currentTarget.dataset.index var query = wx.createSelectorQuery(); var kelong = that.data.kelong var listnum = that.data.optionList.length var optionList = that.data.optionList query.select('.listbox').boundingClientRect(function (rect) { kelong.top = e.changedTouches[0].clientY - rect.top - 30 if(kelong.top<-20){ wx.showModal({ title: '删除提示', content: '确定要删除此条记录？', confirmColor:'#e4463b' }) } var target = parseInt(kelong.top / 60) var replace = that.data.replace if (target >= 0) { replace.xt = optionList[target].xt replace.name = optionList[target].name replace.subname = optionList[target].subname optionList[target].xt = optionList[i].xt optionList[target].name = optionList[i].name optionList[target].subname = optionList[i].subname optionList[i].xt = replace.xt optionList[i].name = replace.name optionList[i].subname = replace.subname } that.setData({ optionList: optionList, showkelong:false }) }).exec(); }, [代码]

https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html 小程序使用page-container时，低下的页面无法上下滚动，如果需要让底下的云还能继续上下滚动，需要怎么处理

前言 navigationBar相信大家都不陌生把？今天我们就来说说自定义navigationBar，把它改变成我们想要的样子（搜索框+胶囊、搜索框+返回按钮+胶囊等）。 思路 隐藏原生样式 获取胶囊按钮、状态栏相关数据以供后续计算 根据不同机型计算出该机型的导航栏高度，进行适配 编写新的导航栏 引用到页面 正文 一、隐藏原生的navigationBar window全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式。 [代码]"window": { "navigationStyle": "custom" } [代码] 让我们看看隐藏后的效果： [图片] 可以看到原生的navigationBar已经消失了，剩下孤零零的胶囊按钮，胶囊按钮是无法隐藏的。 二、准备工作 1.获取胶囊按钮的布局位置信息 我们用wx.getMenuButtonBoundingClientRect()【官方文档】获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点： [代码]const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); [代码] width height top right bottom left 宽度 高度 上边界坐标 右边界坐标 下边界坐标 左边界坐标 下面是官方给的示意图，方便大家理解几个坐标。 [图片] 2.获取系统信息 用wx.getSystemInfoSync()【官方文档】获取系统信息，里面有个参数：statusBarHeight（状态栏高度），是我们后面计算整个导航栏的高度需要用到的。 [代码]const systemInfo = wx.getSystemInfoSync(); [代码] 三、计算公式 我们先要知道导航栏高度是怎么组成的， 计算公式：导航栏高度 = 状态栏高度 + 44。 实例 【源码下载】 自定义导航栏会应用到多个、甚至全部页面，所以封装成组件，方便调用；下面是我写的一个简单例子： app.js [代码]App({ onLaunch: function(options) { const that = this; // 获取系统信息 const systemInfo = wx.getSystemInfoSync(); // 胶囊按钮位置信息 const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 导航栏高度 = 状态栏高度 + 44 that.globalData.navBarHeight = systemInfo.statusBarHeight + 44; that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right; that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight; that.globalData.menuHeight = menuButtonInfo.height; }, // 数据都是根据当前机型进行计算，这样的方式兼容大部分机器 globalData: { navBarHeight: 0, // 导航栏高度 menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致） menuBotton: 0, // 胶囊距底部间距（保持底部间距一致） menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致） } }) [代码] app.json [代码]{ "pages": [ "pages/index/index" ], "window": { "navigationStyle": "custom" }, "sitemapLocation": "sitemap.json" } [代码] 下面为组件代码： /components/navigation-bar/navigation-bar.wxml [代码]<!-- 自定义顶部栏 --> <view class="nav-bar" style="height:{{navBarHeight}}px;"> <input class="search" placeholder="输入关键词！" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{menuHeight}}px; left:{{menuRight}}px; bottom:{{menuBotton}}px;"></input> </view> <!-- 内容区域： 自定义顶部栏用的fixed定位，会遮盖到下面内容，注意设置好间距 --> <view class="content" style="margin-top:{{navBarHeight}}px;"></view> [代码] /components/navigation-bar/navigation-bar.json [代码]{ "component": true } [代码] /components/navigation-bar/navigation-bar.js [代码]const app = getApp() Component({ properties: { // defaultData（父页面传递的数据-就是引用组件的页面） defaultData: { type: Object, value: { title: "我是默认标题" }, observer: function(newVal, oldVal) {} } }, data: { navBarHeight: app.globalData.navBarHeight, menuRight: app.globalData.menuRight, menuBotton: app.globalData.menuBotton, menuHeight: app.globalData.menuHeight, }, attached: function() {}, methods: {} }) [代码] /components/navigation-bar/navigation-bar.wxss [代码].nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; background: #000;} .nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;} [代码] 以下是调用页面的代码，也就是引用组件的页面： /pages/index/index.wxml [代码]<navigation-bar default-data="{{defaultData}}"></navigation-bar> [代码] /pages/index/index.json [代码]{ "usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar" } } [代码] /pages/index/index.js [代码]const app = getApp(); Page({ data: { // 组件参数设置，传递到组件 defaultData: { title: "我的主页", // 导航栏标题 } }, onLoad() { console.log(this.data.height) } }) [代码] 效果图： [图片] 好了，以上就是全部代码了，大家可以文中复制代码，也可以【下载源码】，直接到开发者工具里运行，记得appid用自己的或者测试哦！ 下面附几张其它小程序的效果图，大家也可以尝试照着做： [图片][图片] 总结 本文写了自定义navigationBar的一些基础性东西，里面涉及组件用法、参数传递、导航栏相关。 由于测试环境有限，大家在使用时如果发现有什么问题，希望及时反馈，以供及时更新帮助更多的人！ 大家有什么疑问，欢迎评论区留言！

最新：2020/06/13。修改为scroll-view与swiper联动效果,新增下拉刷新以及上拉加载效果。。具体效果查看代码片段，以下文章内容和就不改了 刚刚在社区里看到 有老哥在问如何做滚动的导航栏。这里简单给他写了个代码片段，需要的大哥拿去随便改改，先看效果图： [图片] 代码如下： wxml [代码]<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}" > <view class="navigate-item" id="item{{index}}" wx:for="{{taskList}}" wx:key="{{index}}" data-index="{{index}}" bindtap="handleClick"> <view class="names {{currentTab === index ? 'active' : ''}}">{{item.name}}</view> <view class="currtline {{currentTab === index ? 'active' : ''}}"></view> </view> </scroll-view> [代码] wxss [代码].scroll-wrapper { white-space: nowrap; -webkit-overflow-scrolling: touch; background: #FFF; height: 90rpx; padding: 0 32rpx; box-sizing: border-box; } ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .navigate-item { display: inline-block; text-align: center; height: 90rpx; line-height: 90rpx; margin: 0 16rpx; } .names { font-size: 28rpx; color: #3c3c3c; } .names.active { color: #00cc88; font-weight: bold; font-size: 34rpx; } .currtline { margin: -8rpx auto 0 auto; width: 100rpx; height: 8rpx; border-radius: 4rpx; } .currtline.active { background: #47CD88; transition: all .3s; } [代码] JS [代码]const app = getApp() Page({ data: { currentTab: 0, taskList: [{ name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, ] }, onLoad() { }, handleClick(e) { let currentTab = e.currentTarget.dataset.index this.setData({ currentTab }) }, }) [代码] 最后奉上代码片段： https://developers.weixin.qq.com/s/nkyp64mN7fim

在 WebView 渲染之外新增了一个渲染引擎 Skyline，其使用更精简高效的渲染管线，并带来诸多增强特性，让 Skyline 拥有更接近原生渲染的性能体验。

[图片] 引入字体包报错 VM303:1 Failed to load font    net::ERR_CACHE_MISS

抛开软件功能不谈，在交互体验上，打造一款能和原生APP相媲美的微信小程序，是我这样的微信开发者的梦想。想在技术上想实现原生的功能，开发成本是非常巨大的。但感谢微信小程序推出的渲染引擎Skyline，让我可以轻松实现原生app的交互体验。 目前，小程序已上线运行半月，虽有bug，但瑕不掩瑜。如果您对于使用webView开发还是Skyline开发还有疑虑的话，希望以下介绍对于有选择困难症的同学们有所帮助。接下来，我想借助自己开发的小程序，向大家推荐与介绍Skyline渲染引擎（当然也希望向大家推荐我所开发的小程序 -- 「 NONZERO COFFEE 」）。 如有错误或遗漏，欢迎在评论区批评指正，不胜感激。 小程序效果演示 [图片] 对小程序感兴趣的也可以加我好友讨论技术： [图片] 开发文档中对于Skyline的介绍，有以下几个重要的增强特性：worklet 动画、手势系统、自定义路由（预设路由）、共享元素动画。对于他们的使用和说明，我就不过多说明了，具体可以参照：https://mp.weixin.qq.com/s/dRz2PnkwHxYVL2kCexQ7WQ。 接下来我会介绍这些特性在小程序中，是怎么变成我的奇淫巧技，让小程序也可以更加优美。 worklet 动画：丝滑与复杂的页面元素展示 当页面滚动时，我们通常会希望根据页面不同的滚动状态或位置，灵活的展示或改变某些元素的状态，那么借助scroll-view的worklet:onscrollupdate时间和worklet动画可以完美实现效果~ [图片] 1、展示中可以看到背景图片会随着下拉放大，但是上滑时却是跟随上滑，完美实现不同状态 2、为了优化顾客点单体验，主要菜单栏（点单、外卖、商城）需要在上滑至离开屏幕时，顶部需要弹出备用菜单栏. 以上效果如果通过简单的wx:if判断，那么动画效果势必会很突兀，如果使用worklet 动画的timing()与spring()函数，可以轻松实现动画的流畅效果。 附上简单代码：  这里是置顶的点单菜单栏 这里是页面内容和   onLoad(options) {         // 背景图片的高度和缩放         this.bgimgTop = shared(0)         this.bgimgSca = shared(1)         // 顶部点单栏透明度         this.topfunOp = shared(0)     },    onReady() {         // 背景图片动画监听        this.applyAnimatedStyle('.bgimg', () => {           'worklet'            return {top: `${this.bgimgTop.value}px`,transform:`scale(${this.bgimgSca.value},${this.bgimgSca.value})`}        })        // 顶部点单栏动画监听       this.applyAnimatedStyle('.fixtopview', () => {           'worklet'           return {opacity: `${this.topfunOp.value}`}       })     },       scrolling(e){         "worklet"         let scrollTop = e.detail.scrollTop         if(scrollTop <= 0){ //向下滚动             this.bgimgTop.value = 0             this.bgimgSca.value = 1 +  (-scrollTop  /  800)             this.topfunOp.value = 0         }else{ //向上滑动             this.bgimgTop.value = - scrollTop             this.bgimgSca.value =   1             let opTemp = (scrollTop / 200)             this.topfunOp.value = opTemp >= 1 ? 1 : opTemp         }     }, Tip:由于代码量较大，以下说明不会附上详细代码，待后续整理好源码，会开源的 手势系统：提升用户留存率，神之一手 [图片] 这个实例呢，和第一个非常相似，是因为其中也 用到了worklet动画，换句话说，如果使用了Skyline框架，那么worklet将萦绕整个开发进展，它即代替了wss和css动画。 另外，更重要的是这个实例运用了手势系统，概而述之，就是使用<pan-gesture-handler><vertical-drag-gesture-handler>去更精细化的代理使用和监听<scroll-view>组件。  一、首页由<pan-gesture-handler>判断页面状态，状态1：往上拖动，不处理滚动事件，而是负责顶部搜索按钮和搜索框的动画效果、背景图片的缩放效果、以及整个容器的高度变化；状态2：向下滑动,则处理滚动事件 二、当判断向下滑动，处理滚动事件时，先由<vertical-drag-gesture-handler>判断<scroll-view>是否触顶，接下来也有两种状态，状态1：触顶，则改变由<vertical-drag-gesture-handler>接管，处理容器下滑的动画；状态2：没有触顶，则是<scroll-view>的正常滑动。 自定义路由 ：小程序焕然一新，媲美原生 示例一： [图片] 这个详情弹出页的效果和webview下的 <page-container>组件的效果基本相似，如果这里简单的使用跳转新页面，则不符合UI设计稿，使用页面弹出组件时，又会发生用户的返回操作直接退出商品列表页，所以这里使用的自定义路由,并且还利用了worlklet和手势系统，实现了手势下滑与左滑时，如果下滑距离和下滑速度足够，则退出，不足够，则回弹恢复。 示例二： [图片] 这里的自定义路由，效果不明显，但是恰恰就需要这种效果。简单来说就是用户点击搜索框，需要跳转到搜索页面，但是设计稿中需要这种跳转是无感的，而自定义路由中将transitionDuration跳转时间设置为10或者更短，并且将handlePrimaryAnimation跳转效果设置成空值，即可完美实现。以下是简单的自定义路由配置代码： const ShopSearchRouteBuilder = (customRouteContext) => {     console.info('skyline: half page route build')     /**      * 1. 手势拖动时采用原始值      * 2. 页面进入时采用 curve 曲线生成的值      * 3. 页面返回时采用 reverseCurve 生成的值      */     const handlePrimaryAnimation = () => {         'worklet'         return {         }     }     return {         opaque: false,         handlePrimaryAnimation,         transitionDuration: 10,         reverseTransitionDuration: 10,         barrierDismissible:true,         canTransitionTo: false,         canTransitionFrom: false,     } } 共享元素 ：我的奇奇怪怪的使用 [图片] 如果没有看出这个例子的共享元素是如何使用的，那么我用webview的页面来分解一下。 [图片] [图片] 这里的商品列表页和购物车其实是两个页面，但是底部的购物车按钮元素，又需要在两个页面跳转时，无感展示，所以这里是最适合使用共享元素的，我个人认为，这比跳转页面时使详情图片在不同页面间飞跃更加高级和实用。 但是既然说到了图片飞跃的效果，下面我也来展示几个实用例子： [图片] [图片] 这里的两个例子也都是列表页跳转至详情页时，实例图片的飞跃。 当然小程序中的动画效果可不止以上罗列的这么几个，总而言之，使用了Skyline之后，以上的动画效果在小程序中随处可见，如果不是本人的代码能力有限，我想小程序的整体效果完全可以媲美APP的原生效果。 希望以上这些能够为即将进行微信小程序开发，而苦恼于是否使用Skyline的同学们，带来新的思路。 Skyline的bug：背刺与惊喜 新技术需要有勇气去使用，去克服遇到的一切问题我遇到了很多bug，虽然他总会在我意料不到的地方背刺我一刀，但是Skyline的效果实在让我欲罢不能，万分庆幸的是我真的要非常感谢微信团队的老师们，给了我很多建议与帮助。 还没有经过老师同意上图，暂时先打个码。 [图片] [图片] 好了，接下来说一下，现在还没有解决的bug，希望微信团队能尽快修复。 1、小程序使用的是自定义tabbar，在ios下，相隔较长时间再重新打开小程序，会出现白屏的现象，是完全不显示任何元素，但vconsole是可以看到各生命周期已经正常允许了的。这里实在不好上传相关代码，因为首页代码很复杂。还关联了全局状态管理。 与其他同学沟通过，发现并不是我的单一案例，也有人复现了。 解决方案：万幸我使用的是自定义tabbar，小程序启动首页被我设置成了某一个单页面，然后从单页面跳转到tabbar首页，并且这个单页面还能设置成宣传海报首页，这也算是一个自洽的解决方法。 2、wx.switchTab()方法：前提依旧是自定义tabbar，假设tabbar有A、B、C、D首先进入了tabbar首页A页面,然后跳转到其他页面，如果这时使用wx.switchTab()跳转至B\C\D页面，会出现tabbar栏不出现的情况。 解决方案：全部跳转至A首页，或者tabbar页面底部安置一个假的tabbar栏。 3、最麻烦的问题：如果我不考虑兼容的问题，那么即代表我需要抛弃一部分没有升级微信版本习惯的用户，因为低版本的微信无法正常使用Skyline框架开发的小程序。 解决方案：如果您的开发成本和时间足够，完全可以慢慢兼容、如果还在纠结，建议您单页面慢慢升级Skyline，Skyline支持单页面渲染（这可真是太棒了），但是对于我这种有代码强迫症的人来说，这是硬伤，我不能忍受一个页面是webview，另一个是skyline，我只能慢慢熬过用户更新的阵痛期。 最后，我还想说几句话： 1、开源这件事，我已经做好了准备，但是开源成本太大，我还没考虑好是否花时间进行开源，总之，有需要的同学，可以写个评论支持下。 2、开发： （1）前端：有80%以上的图片与文字，都是通过后台数据渲染的，也就是说部署后，基本不需要修改小程序代码，但是自由度极高。 （2）后台框架：考虑到是小项目，只使用了java的springboot，数据库使用的是mySql，缓存则也是通过代码实现的（不使用redis，是因为云托管不支持，单独买太贵了），存储使用的腾讯的COS。 （3）后台部署：我抛弃了传统服务器，拥抱了微信云托管。 （4）管理admin页面：使用的是antd admin（vue2）,部署方面同样也是使用的云托管的静态资源存储。