[Skyline渲染引擎]学习日D1 draggable-sheet |

来了总是要优化的毕竟技术在进步从今天开始准备一个个认真学习下小程序的Skyline渲染引擎虽然已经用第三方的组件库好几年了但是感觉组件库的体验和交互还是和APP有差距其实挺矛盾官方总是说小程序是用完即走这么说的话其实整体界面交互这些感觉不是很需要效果动效多么炫酷这样毕竟都是功能为先

但是近两年开始渐渐还是接触到一些比较新的客户需求类似我不要普普通通像个样板一样的小程序我希望小程序能像我们自己的APP一样有动效有美感有设计感这些客户的需求组件库里的组件就很多满足不了了更别说还有些独特的手势或者动效

新开了一个项目工程一步步跟着教程学习下看看一方面试一下稳定性怎么样会不会有BUG这样线上能查到的有关Skyline的信息不太多估计也有大神只是没写东西分享出来吧希望隐藏的大神们什么时候能出个Skyline的组件库 😃

说正题第一个组件 draggable-sheet 官方给的描述是半屏可拖拽组件看效果演示蛮好看的[之前做iOS开发的时候我印象是有这个的]

下方的VIEW可以手势按住网上拖拽到顶部之后和吸顶组件合在一块体验很顺滑先记录下组件的使用晚点研究好了再单独开一篇Webview向Skyline迁移的完整过程贴一下组件的使用代码

<draggable-sheet class="sheet" initial-child-size="{{minSize}}" min-child-size="{{minSize}}" max-child-size="{{maxSize}}" snap="{{false}}" snap-sizes="{{[]}}" worklet:onsizeupdate="onSizeUpdate"> <scroll-view associative-container="draggable-sheet" class="scrollable" scroll-y type="custom" show-scrollbar="{{false}}"> <sticky-section> <sticky-header> <view class="bar"> <view class="indicator" /> </view> <view class="row title"> <text>Latest in the area</text> <view class="outer-circle center"> <view class="inner-circle" /> </view> </view> </sticky-header> <list-view> <block wx:for="{{list}}" wx:key="id"> <view class="section"> <view class="card"> <view class="info"> <view class="row"> <image class="info-img" src="{{headImg}}" mode="aspectFill" /> <view class="column" > <text class="n-1">Selen Zeynep</text> <text class="mini-txt">Local Guide • 14 reviews</text> </view> </view> <view class="follow-btn"> Follow </view> </view> <image class="card-img" src="{{item.img}}" mode="aspectFill" /> <view class="row between" > <text class="mini-txt">2 days ago</text> <view class="operation row"> <image class="opt-img" src="../../images/good.png" mode="aspectFill" /> <image class="opt-img" src="../../images/more.png" mode="aspectFill" /> </view> </view> <view class="bottom-intro column"> <text>Mud Island Amphitheaster</text> <text class="mini-txt">4.4 🌟• Outdoor seasonal theaster • 0.6 mi</text> </view> </view> </view> <view class="spacer" /> </block> </list-view> </sticky-section> </scroll-view></draggable-sheet>

放2个真机的截图 iPhone上使用的效果很喜欢第一张是组件初始状态第二张是手势滑动后下部分View向上覆盖为完整的View后的效果