[Skyline渲染引擎]学习日D3 open-container |

手上没照片了最近没出门拍照 😃 先感谢下封面提供的摄影师

封面图片源域名是

图片来源

接着昨天来今天说 open-container 官方的描述是容器转场动画组件

按照我们这边自己的开发需求说一下

首页是商品列表点击某个商品后需要跳转到商品详情之前我们比较传统的做法是

tap点击事件之后由index首页 wx.navigateTo 跳转进入到good-detail页面客户的感知上点击事件发生后会有一个新的view[商品详情]从手机屏幕右侧推入推入效果完成后完全覆盖首页

Skyline这个open-container的效果就会比较像之前做iOS开发里的效果比如商品列表上有2行2列每个商品是一个矩形卡片点击其中一个商品卡片后原列表上被点击的卡片会有个被点击缩放的效果然后商品详情页是由列表上的小商品卡片动效收缩放大后蹦出来显示到客户面前就不再是从右边推入一个新的view 在详情页点击返回按钮后也是一样的动效不是从左至右退出详情view 而是直接缩小返回到列表上的小卡片这一个简单的缩放效果就完成了进入新页面和退出当前页面的流程交互体验上会少了种界面一个view堆叠另外一个view的感受我个人是很喜欢这种交互不知道同行们在开发使用的时候怎么样

就是有2个细节因为动态效果的时间很短不知道如果使用小程序的用户手机或者设备老一些渲染起来会不会有影响比如卡顿或者渲染不流畅这样

还有就是这个一般都用在列表进入详情页这样一个需求如果请求慢一些或者详情内的数据多一些需要重新组装一下数据的话会不会加载不出数据我们在客户程序里比较传统的做法是第一次加载会向服务器拉一下数据之后redis缓存下如果管理员在后台不编辑详情内的数据一般会留个几小时的缓存时间用户这边下次点击进入详情数据加载就几乎是无感了除非是redis那边的缓存时间到期了或者程序的管理员在后台编辑了详情数据清了redis的缓存嗯大概就是这样还是贴一下官方示例的代码可以直接使用

列表页index.wxml

<navigation-bar back="{{false}}" title="Open Container Demo" background="rgb(91, 171, 110)" /><scroll-view type="list" scroll-y class="scrollable" padding="{{[8, 8, 8, 8]}}" show-scrollbar="{{false}}" > <view class="card-row"> <open-container closed-elevation="{{closedElevation}}" closed-border-radius="{{closedBorderRadius}}" open-elevation="{{openElevation}}" open-border-radius="{{openBorderRadius}}" transition-type="{{type}}" transition-duration="{{duration}}" bind:tap="goDetail"> <example-card /> </open-container> </view> <open-container closed-elevation="{{closedElevation}}" closed-border-radius="{{closedBorderRadius}}" open-elevation="{{openElevation}}" open-border-radius="{{openBorderRadius}}" transition-type="{{type}}" transition-duration="{{duration}}" bind:tap="goDetail"> <example-single-title /> </open-container> <view class="card-row" /> <view class="card-row"> <block wx:for="{{[0, 1]}}"> <open-container class="card-item" closed-elevation="{{closedElevation}}" closed-border-radius="{{closedBorderRadius}}" open-elevation="{{openElevation}}" open-border-radius="{{openBorderRadius}}" transition-type="{{type}}" transition-duration="{{duration}}" bind:tap="goDetail"> <small-card class="card-item" /> </open-container> <view wx:if="{{index < 1}}" class="split" /> </block> </view> <view class="card-row"> <block wx:for="{{[0, 1, 2]}}"> <open-container class="card-item" closed-elevation="{{closedElevation}}" closed-border-radius="{{closedBorderRadius}}" open-elevation="{{openElevation}}" open-border-radius="{{openBorderRadius}}" transition-type="{{type}}" transition-duration="{{duration}}" bind:tap="goDetail"> <small-card /> </open-container> <view wx:if="{{index < 2}}" class="split" /> </block> </view> <block wx:for="{{list}}"> <open-container url="{{detailPage}}" closed-elevation="0" closed-border-radius="0" open-elevation="{{openElevation}}" open-border-radius="{{openBorderRadius}}" transition-type="{{type}}" transition-duration="{{duration}}" bind:tap="goDetail"> <view class="list-title"> <view class="list-item-leading"> <image class="avatar" src="../../assets/avatar_logo.png" /> </view> <view class="list-item-content"> <view class="item-title">List item {{index + 1}}</view> <view>Secondary text</view> </view> </view> </open-container> </block></scroll-view><open-container class="float-button" closed-color="plum" middle-color="yellow" open-color="white" closed-border-radius="28" open-border-radius="{{openBorderRadius}}" transition-type="{{type}}" transition-duration="{{duration}}" bind:tap="goDetail"> <view class="center ball" bind:longpress="toggleType">+</view></open-container>

列表页index.js

const app = getApp()const genList = (num) => { const ans = [] for (let i = 0; i < num; i++) { ans.push({ id: i, }) } return ans}Page({ data: { type: 'fade', duration: 300, closedElevation: 1, closedBorderRadius: 4, openElevation: 4, openBorderRadius: 0, list: genList(10), detailPage: '../detail/index', renderer: '', }, onLoad() { this.setData({ renderer: this.renderer }) }, goDetail() { wx.navigateTo({ url: '../detail/index' }) }, toggleType() { const type = this.data.type === 'fade' ? 'fadeThrough' : 'fade' console.info('@@@ change type -》 ', type) this.setData({ type }) wx.showToast({ info: 'none', title: `${type}`, }) }})

列表页index.wxss

/* pages/detail/index.wxss */page { height: 100vh; display: flex; flex-direction: column;}.scrollable { flex: 1; overflow: hidden; box-sizing: border-box;}.center { display: flex; align-items: center; justify-content: center;}.img-wrap { height: 250px; width: 100%; padding: 70px; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.38);}.img { width: 100%; height: 100%;}.article { padding: 20px; font-size: 16px; line-height: 1.5; color: rgba(0, 0, 0, 0.54);}.title { font-size: 30px; margin-bottom: 10px;}.card-row { margin-bottom: 16px; display: flex; flex-direction: row;}.card-item { flex: 1;}.split { width: 8px; height: 100%;}.list-title { display: flex; flex-direction: row; padding: 10px 0 15px; font-style: italic; font-size: 14px; color: rgba(0, 0, 0, 0.54);}.list-item-leading { margin-left: 20px; margin-right: 15px;}.avatar { width: 40px; height: 40px; border-radius: 50%;}.list-item-content { display: flex; flex-direction: column; justify-content: center;}.item-title { font-size: 16px; color: #000;}.float-button { width: 56px; height: 56px; position: absolute; right: 20px; bottom: 60px;}.ball { height: 100%; border-radius: 50%; background-color: plum; font-size: 24px;}

开始把一些组件往项目里引入了之后出现的BUG也会单独记录一下希望Skyline越来越强

保持好奇不断进步下期见~