139-8950-0275

绍兴云远网络热线
首页 >> 小程序 >>小程序专业知识 >> 2023年,整点新活儿!-绍兴网络公司为你呈现
详细内容

2023年,整点新活儿!-绍兴网络公司为你呈现

时间:2023-02-18     作者:绍兴网络公司【转载】   来自:微信派

再也不想搞前端了


每次调整布局真的好麻烦


产品想要瀑布流,调到眼睛要大修


设计一定要吸顶,sticky害我 要秃顶


都2023年了,前端能好过点吗?


每个开发者都期待新一年....


2023年


听说开发者写代码更简单了?


听说程序员工作轻松点儿了?


......


别听说了!


现在滑进2023年


看看有哪些科技与狠活吧


吸顶布局


人称「调整调到头秃顶」的交错吸顶布局,


2023年会有全新玩法吗?


点击选项发现不同方法


A  头秃古早玩法

B  全新吸顶大法


网格布局

人称「手动切网格、调整烦到吐」的网格布局


2023年会有全新玩法吗?


点击选项发现不同方法

A  手动网格切割术

B  一键切换切割术


瀑布流布局


人称「瀑布流很美,代码写到累」的瀑布流布局


2023年会有全新玩法吗?


点击选项发现不同方法

A  最费手的开发方法

B  最省事的全新方法


以上全新玩法更方便、更简单、更省事

尽在 新版 scroll-view 组件


新版 scroll-view 组件 在自定义模式下,新增 3 个布局组件,便于开发者高效、快捷地优化小程序页面布局,优化用户体验:



吸顶布局代码示例


使用 sticky 布局仅需 4 步即可快速实现交错吸顶的功能:

  1. 将 scroll-view 切换到 custom 模式

  2. 采用 sticky-section 作为 scroll-view 的子元素

  3. sticky-header 放置吸顶内容

  4. list-view 放置列表内容


网格布局代码示例

相比过往自行切割网格的方式,应用 grid-view 组件只需 3 步即可实现网格布局:

  1. 将 scroll-view 切换到 custom 模式

  2. 采用 grid-view 类型为 aligned 作为直接子节点

  3. 在 grid-view 中直接编写列表


瀑布流布局代码示例


相比以往计算网格大小、拼接瀑布流等复杂方法,直接使用 grid-view 组件也能高效实现瀑布流效果:

  1. 将 scroll-view 切换到 custom 模式

  2. 采用 grid-view 类型为 masonry 作为直接子节点

  3. 在 grid-view 中直接编写列表


新版 scroll-view 组件如此强大,现在使用微信开发者工具导入 代码片段(注意:请使用 PC 端浏览器打开),即可快速体验布局能力!


image.png

听说你对新版 scroll-view 组件很熟悉?


听说你还想拥有更多好用的渲染能力?
小程序团队一直致力于优化 小程序渲染框架,提升开发效率,优化小程序的用户体验。现邀请各位开发者参与「小程序渲染框架有奖调研」,畅所欲言,让我们更了解你的需求和建议。



2023 年 2 月 8 日停止收集问卷后,微信团队将从有效问卷中随机抽取 5 位参与者,各送出微信官方周边礼物 1 份,快来分享你的开发体验吧!

image.png


* 获奖名单将于「微信开发者」公众号进行公示


微信开发者视频号  快来关注我们吧

技术支持: 杭州云远科技有限公司 | 管理登录
seo seo