太阳集团5493conlogo

  • 微博
  • 微信
  • QQ好友
  • QQ空间
  • 百度
详细内容

列表嵌套,用对组件更高效-杭州网站建设为你呈现

时间:2024-01-31     作者:杭州网站建设【转载】   来自:微信派

随着业务的快速发展,小程序承载越来越丰富的功能,页面结构也变得更复杂。不少产品需要多个列表切换的操作来实现无需跳转的丝滑用户体验。

image.png

然而原有的 scroll-view 组件无法完美支持多列表嵌套滚动,导致切换过程出现卡顿等情况。为了优化多个列表嵌套滚动的性能表现,自基础库 3.2.0 起,Skyline 渲染引擎的 scroll-view 组件支持 type="nested" 属性,支持开发者轻松实现父子 scroll-view 间的嵌套滚动。


接入 nested 仅需 2 步即可快速实现:

  1. 最外层使用

  2. 内部直接使用 nested-* 组件

  • nested-scroll-header:属于外层 scroll-view 的节点

  • nested-scroll-body:属于里层 scroll-view 的节点


除此以外,产品设计同学希望用户进入页面不只是看到单调的列表结构,也希望添加封面图直观展示产品特点,丰富页面结构,满足个人中心页、产品介绍页等常见场景。

image.png

现在 scroll-view 组件 支持结合 worklet 特性,满足更复杂的页面设计需求,同步实现以下贴近原生的交互效果:

  1. 下拉封面图,放大呈现图片内容,避免出现下拉过程出现图片上方空白的情况

  2. 下拉至列表位置,列表栏自动吸顶,方便用户自由切换其他列表;上滑超过列表栏则恢复原有的页面结构

image.png

看似复杂的页面逻辑,通过 scroll-view 与 worklet 即可轻松解决:

  1. 在 scroll-view 组件内嵌入两个 view 组件,第一个 view 组件用于展示封面图部分,第二个 view 组件则用于展示列表部分

  2. 监听 scroll-view 滚动事件,判定当前滚动位置

  3. 对于需要滚动时改变的参数(例如下拉过程需要被隐藏的封面图),使用 applyAnimatedStyle 进行绑定

  4. 编写 onScroll 事件,根据滚动方向分别处理上滑和下拉的情况,修改共享变量(例如修改封面图大小)


通过 scroll-view 组件 的灵活应用,开发者仅需几步即可快速实现完整的多列表页面结构,不仅满足产品设计的视觉需求,还实现贴近原生的丝滑切换效果。除此以外,Donut 多端框架 已支持接入 Skyline 渲染引擎,实现更流畅的多端交互体验,欢迎各位开发者接入!


如有 Skyline 渲染引擎相关问题,可在 Skyline 社区专区 发帖互动,技术专员将为大家解答及进行深度交流。

image.png

# Skyline小程序渲染引擎16

太阳集团2138手机版
更多
  • 公众号返佣商品三大活动助流量主带货增收-

    公众号返佣商品三大活动助流量主带货增收-

    为助力公众号流量主通过文章带货取得更多收益,公众号返佣商品 9 月将推出三大活动,以更优惠的商品和更高的返佣激励,带动创作者高效创收。02拼多多活动单单有奖励活

  • 小游戏激励托管功能上线,助力开发者收益再

    小游戏激励托管功能上线,助力开发者收益再

    近期,微信广告上线全新的小游戏用户运营工具 ——激励托管功能,基于微信平台及腾讯广告引擎的智能预估能力,帮助开发者在激励式广告位实时计算并比较用户的分享与广告互

  • 品牌门户,加速转化:搜一搜超级品牌专区优

    品牌门户,加速转化:搜一搜超级品牌专区优

    自搜一搜超级品牌专区上线以来,众多品牌纷纷开启投放,打造微信生态内的品牌门户。搜一搜超级品牌专区,也以强大的生态连接力和丰富组件功能,助力品牌实现全链路转化提效

  • 公众号返佣商品能力升级,导入推文一键带货

    公众号返佣商品能力升级,导入推文一键带货

    为提升公众号流量主文章带货便捷性,公众号返佣商品升级产品能力,上线有导购文章和素材的商品,并支持一键导入推文;同时持续丰富商品库,以多元带货玩法带动流量主收益提

  • 视频号小任务上线:灵活变现,小而不凡-杭

    视频号小任务上线:灵活变现,小而不凡-杭

    微信广告上线面向视频号作者的现金任务撮合产品 ——视频号小任务(下称小任务)。小任务连接广告主推广与创作者变现需求,以视频号活动为载体,鼓励创作者投稿参与,并以

  • 全生命周期服务,助力小游戏开发者长效增收

    全生命周期服务,助力小游戏开发者长效增收

    近些年,小游戏行业快速发展,休闲游戏用户规模持续增长。与此同时,为满足小游戏开发者不同阶段的增长诉求,微信广告持续迭代产品能力,打造了完整的买量变现闭环服务解决

  • 视频号互选组件升级,一键直达落地页-杭州

    视频号互选组件升级,一键直达落地页-杭州

    近期,腾讯广告互选平台进行了多重产品升级,在投放前提供更丰富的选号数据,投放中支持视频号互选组件直达落地页,投放后新增合作计划记录一键下载功能,让广告主合作体验

  • “新”意满满,心动不已:2022 年微信

    “新”意满满,心动不已:2022 年微信

    今年七夕,微信广告开放全新广告场景,升级互动玩法,以满满“新”意,为品牌和用户牵起红线。选取部分案例,按品牌英文名称首字母排序了解七夕精选营销案例按品牌英文名称

  • 腾讯广告全流量通投能力升级,投放再提效-

    腾讯广告全流量通投能力升级,投放再提效-

    为了更好地帮助广告主提升投放效率和起量速度,腾讯广告投放平台贯彻投放一体化的演进趋势,不断整合腾讯生态中不同投放场景,最大程度为广告主的日常投放减负增效。现在,

  • 腾讯广告游戏行业暑期抢量攻略-杭州微信小

    腾讯广告游戏行业暑期抢量攻略-杭州微信小

    01腾讯广告全域库存攀升轻松抢占优质流量红利微信广告:重点流量呈亿级增长整体流量库存预计+10%朋友圈曝光量库存较往常水平有亿级增长暑期预估+7%小程序小游戏流

太阳集团5493con是一家专门致力于为企业提供全方位网站建设服务。年轻的我们带着梦想和对网络的热情走在互联网道路的前沿,一路走来,我们的努力和真诚得到了更多客户的认可。在未来的发在未来的发...

浙公网安备:33010602011153

seo seo