微信小程序实现吸顶、网格、瀑布流布局

微信小程序开发通常是在webview模式下编写,但是对小程序的渲染性能有一定的追求,就需要使用Skyline模式进行渲染,同时在这种模式下有也有一些特殊的组件,可以轻松的实现想要的效果,本文将介绍在Skyline模式下如何实现吸顶、网格、瀑布流布局。

以下是具体的实现:

1. 修改渲染模式

1. 在app.json中添加如下配置:

"renderer": "skyline",  // 声明渲染模式
"lazyCodeLoading": "requiredComponents", // 声明依赖注入
"rendererOptions": {   "skyline": {"defaultDisplayBlock": true, // 默认为块布局"defaultContentBox": true,   // 默认开启盒模型"disableABTest": true        // 禁用AB测试}
},
"componentFramework": "glass-easel" // 使用的组件框架

2. 由于在Skyline模式下,不支持页面全局滚动,也不支持原生导航栏,所以在页面的json配置文件中还要添加如下配置:

{"usingComponents": {},"disableScroll": true,"navigationStyle": "custom"
}

2. 主要组件介绍

1. sticky-section 吸顶布局容器;

仅支持作为 <scroll-view type="custom"> 模式的直接子节点。

2. sticky-header 吸顶布局容器;

仅支持作为 <scroll-view type="custom"> 模式的直接子节点或 sticky-section 组件直接子节点。

3. grid-view 网格布局容器,可实现网格布局、瀑布流布局等;

仅支持作为 <scroll-view type="custom"> 模式的直接子节点。按需渲染节点,比 Webview 兼容实现具备更好的性能。

3. 所有代码实现

1. 以下是WXML文件代码

<!-- index.wxml -->
<scroll-view type="custom" scroll-y show-scrollbar="{{false}}" scroll-into-view="{{intoView}}" class="scroll-view" bindscrolltolower="bindSrollToLower" style="margin-top: {{menuTop}}px;"><sticky-section push-pinned-header="{{false}}"><sticky-header><view class="sticky-header"><view class="search" style="height: {{menuHeight}}px;line-height: {{menuHeight}}px; margin-right: {{menuLeft}}px;"><input placeholder="找找去哪儿玩~" /></view></view></sticky-header><grid-view type="aligned" cross-axis-count="5"><view wx:for="{{topList}}" class="top-list"><image src="https://res.wx.qq.com/op_res/omjFJjgEk_ZZIDmlSIE1hpn57hHOlcHvbMy1jM-BwNFczaS8S_rFryt8b3c7VC4h0BUjX4bSyjoDNaPteTlYcw" mode="aspectFill"></image><text>广州</text></view></grid-view></sticky-section><sticky-section push-pinned-header="{{false}}"><sticky-header><view class="sticky-header"><view class="sticky-header-child"><view class="mini-head current">自然风景</view><view class="mini-head">周边旅游</view><view class="mini-head">温泉</view><view class="mini-head">玩雪</view><view class="mini-head">海边</view></view></view></sticky-header><grid-view type="masonry" cross-axis-count="{{crossAxisCount}}" cross-axis-gap="{{crossAxisGap}}" main-axis-gap="{{mainAxisGap}}"><view wx:for="{{bottomList}}" class="grid-box"><image src="{{item.image_url}}" mode="widthFix"></image><view class="content-box"><text>这里的风景好美~</text><view class="profile-text"><view class="left"><image  src="https://res.wx.qq.com/op_res/lS41C5Xp6y6mfUbelCW8PArEcMwWRuhSohPO46vAiELbhAf56_CwONEDgM2vIVxOlT5KDcSxCkV8xIJ6cg3x2Q"></image><text>binnie</text></view><view class="right"><image  src="https://res.wx.qq.com/community/dist/community/images/disagree_icon_fab2b7.svg"></image><text>666</text></view></view></view></view></grid-view></sticky-section></scroll-view>

2. 以下是WXSS文件代码:

/* index.wxss */
.scroll-view {width: 100%;height: 100%;
}.search {border: rgb(228, 226, 226) solid 1px;border-radius: 20px;margin: 0 10px;line-height: 30px;height: 30px;
}.search input {padding: 0 10px;line-height: 30px;height: 30px;
}.top-list {display: flex;text-align: center;justify-content: center;align-items: center;padding-top: 10px;flex-direction: column;
}.top-list image {width: 15vw;height: 15vw;border-radius: 50%;
}.top-list text {padding: 10px 0;font-size: 14px;
}.sticky-header {background-color: #fff;
}.sticky-header-child {display: flex;flex-direction: row;
}.mini-head {display: flex;background-color: #f5f5f5;margin: 8px 6px;padding: 6px 8px;border-radius: 4px;font-size: 14px;
}.current {background-color: #07c160;color: #fff;
}.grid-box {padding: 10px;border-radius: 8px;background-color: #f5f5f5;
}.grid-box image {width: 100%;
}.content-box {padding-top: 10px;
}.profile-text {display: flex;flex-direction: row;padding-top: 4px;align-items: center;
}.profile-text view {display: flex;color: #888;font-size: 14px;flex-direction: row;align-items: center;
}.profile-text .left {width: 70%;
}.left image {width: 20px;height: 20px;border-radius: 50%;margin-right: 4px;
}.profile-text .right {text-align: right;color: #888;font-size: 14px;
}.right image {width: 16px;height: 16px;background-size: cover;opacity: .5;color: rgba(0, 0, 0, .5);margin: 0 3px;
}

3. 以下是JavaScript文件代码:

// index.jsimport { getLandscapeImages} from './data'function getNewList() {const newList = new Array(20).fill(0);const imgUrlList = getLandscapeImages();let count = 0;for (let i = 0; i < newList.length; i++) {newList[i] = {id: i+1,title: `scroll-view`,desc: `默认只会渲染在屏节点,会根据直接子节点是否在屏来按需渲染`,time: `19:20`,like: 88,image_url: imgUrlList[(count++) % imgUrlList.length],}};return newList;
}Page({data: {// 顶部列表数据topList: new Array(15).fill(0),// 底部列表数据bottomList: getNewList(),// 网络布局参数crossAxisCount: 2,crossAxisGap: 8,mainAxisGap: 8,// 顶部布局参数menuTop: 0,menuHeight:0,menuLeft:0},onLoad() {const res = wx.getMenuButtonBoundingClientRect();this.setData({menuTop: res.top,menuHeight: res.height,menuLeft: res.width + 10})},bindSrollToLower() {this.setData({bottomList: this.data.bottomList.concat(getNewList())})},})

4. 以下是上面JavaScript代码中引入的本地模拟数据文件data.js代码:

// data.jsconst landscapeList = ['https://res.wx.qq.com/op_res/7_miJnK0wxIrh5bV2QqvYfaqohk6ndcC6_CBkUZszfSpKbqUAV7S2xWRbAQ459YsPWAmLKkicEOPS1L3NmnnRA','https://res.wx.qq.com/op_res/7_miJnK0wxIrh5bV2QqvYYjda9Dp372N3T05q_nn3PgvoXBoReXvaXBfkthtXQLN7m5_YI6FoTre-xvJBDFLMA','https://res.wx.qq.com/op_res/7_miJnK0wxIrh5bV2QqvYfa6mRnywhNbBFV5eAt7oTz3zjlNJeujfQx0PVA1ufenPHBvxYXRNJ5chyi6RPaE7A','https://res.wx.qq.com/op_res/7_miJnK0wxIrh5bV2QqvYYY1OalScOn4EMcQpkPaJ1Sxhri8CScjnhqVfjAZnLuVFl0JAM4VziHhSzHLZXtAaQ','https://res.wx.qq.com/op_res/7_miJnK0wxIrh5bV2QqvYZB1p48LLH-Pc7Rzr4nN0YF-uZg7FW7zksw_Kjp0BNDHcZp9R9SRKbg0rA1HBaeK3Q','https://res.wx.qq.com/op_res/0-l2fyKjv3_BR62E3KwTJPRaN5CDI6NZFg_qbSxeqF8UBpM4lXJ_1o9S9bsOOxMpuXGLeKyAKleWlAXmVLmQOw','https://res.wx.qq.com/op_res/7_miJnK0wxIrh5bV2QqvYRu0VRyVvePJ4pB4_Dvj0ytF-ovjQzMl6WMLyuCeKk3579HNjKLIeNrHE7OprTBx5w'
]export function getLandscapeImages() {return landscapeList
}

5. 以下是页面配置文件代码:

{"usingComponents": {},"disableScroll": true,"navigationStyle": "custom"
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/673337.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【iOS ARKit】人形提取

为解决人形分离和深度估计问题&#xff0c;ARKit 新增加了 Segmentation Buffer&#xff08;人体分隔缓冲区&#xff09;和Estimated Depth Data Buffer&#xff08;深度估计缓冲区&#xff09;两个缓冲区。人体分隔缓冲区作用类似于图形渲染管线中的 Stencil Buffer&#xff0…

进程状态 | 僵尸进程 | 孤儿进程 | 前台后台进程 | 守护进程

文章目录 1.进程的三种基本状态2.Linux中进程状态查看2.1.进程检测脚本2.2.各种状态查看 3.孤儿进程4.前台、后台、守护进程 1.进程的三种基本状态 进程的在系统当中是走走停停的&#xff0c;「运行 - 暂停 - 运行」的活动规律&#xff1b;进程在活动期间的三种状态&#xff1…

【leetcode题解C++】450.删除二叉搜索树中的节点 and 669.修剪二叉搜索树 and 108.将有序数组转换为二叉搜索树

450. 删除二叉搜索树中的节点 给定一个二叉搜索树的根节点 root 和一个值 key&#xff0c;删除二叉搜索树中的 key 对应的节点&#xff0c;并保证二叉搜索树的性质不变。返回二叉搜索树&#xff08;有可能被更新&#xff09;的根节点的引用。 一般来说&#xff0c;删除节点可…

分别通过select、多进程、多线程实现一个并发服务器

select #include<myhead.h>#define PORT 8888 //端口号 #define IP "192.168.114.109" //IP地址int main(int argc, const char *argv[]) {//1、创建用于接受连接的套接字int sfd socket(AF_INET, SOCK_STREAM, 0);if(sfd -1){perror(&q…

【Langchain+Streamlit】旅游聊天机器人

【LangchainStreamlit】打造一个旅游问答AI-CSDN博客 项目线上地址&#xff0c;无需openai秘钥可直接体验&#xff1a;http://101.33.225.241:8502/ github地址&#xff1a;GitHub - jerry1900/langchain_chatbot: langchainstreamlit打造的一个有memory的旅游聊天机器人&…

什么是数据库软删除,什么场景下要用软删除?(go GORM硬删除)

文章目录 什么是数据库软删除&#xff0c;什么场景下要用软删除&#xff1f;go GORM硬删除什么是数据库软删除什么场景下要用软删除 什么是数据库软删除&#xff0c;什么场景下要用软删除&#xff1f; go GORM硬删除 使用的是 GORM&#xff0c;默认启用了软删除功能&#xff…

设计模式(结构型模式)桥接模式

目录 一、简介二、桥接模式2.1、手机品牌接口2.2、手机功能接口2.3、抽象部分2.4、具体抽象部分2.5、使用 三、优点和缺点 一、简介 桥接模式&#xff08;Bridge Pattern&#xff09; 是一种结构型设计模式&#xff0c;用于将抽象部分与它的实现部分分离&#xff0c;使它们可以…

【算法题】96. 不同的二叉搜索树

题目 给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种&#xff1f;返回满足题意的二叉搜索树的种数。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;5 示例 2&#xff1a; 输入&#xff1a;n 1 输出&#x…

js逆向-某东验证码逆向分析

声明 本文仅供学习参考&#xff0c;如有侵权可私信本人删除&#xff0c;请勿用于其他途径&#xff0c;违者后果自负&#xff01; 如果觉得文章对你有所帮助&#xff0c;可以给博主点击关注和收藏哦&#xff01; 插句个人内容&#xff1a;本人最近正在找工作&#xff0c;工作城…

MySQL数据库常用语法回顾及知识点合集(持续更新中……)

前言 本文适合有一定基础的进行快速简单回顾复习。 对于现如今的无论哪一类软件或应用&#xff0c;都几乎无法离开数据库&#xff0c;常见使用的关系性数据库如MySQL、Oracle&#xff0c;非关系性数据库如MongoDB、Redis等。而MySQL数据库则是软件开发中最常用的数据库之一&…

基于SpringBoot的美妆管理系统

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

CS50x 2024 - Lecture 1 - C

本周学习C语言&#xff0c;重点是函数、变量、条件语句和循环。 05:11介绍了编程语言的转换过程&#xff0c;从源代码到机器码&#xff0c;以及编译器的作用。 编译器是将一种语言翻译成另一种语言的程序 09:18使用CS50.dev进行编程&#xff0c;介绍了VS Code和命令行界面的…

LeetCode Python - 1.两数之和

文章目录 题目答案运行结果 题目 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能…

数据结构——算法的时间复杂度和空间复杂度

1、算法效率 1.1如何衡量一个算法的好坏&#xff1f; 比如我们最熟悉的斐波那契数列 long long Fib(int N) {if(N < 3)return 1;return Fib(N-1) Fib(N-2); } 上面的斐波那契数列使用递归实现&#xff0c;看起来非常的简洁&#xff0c;那么代码一定是越简洁越好么&…

930. 和相同的二元子数组(多指针滑动窗口)

多指针滑动窗口 滑动窗口&#xff0c;由于题目中数组为二元组数组&#xff0c;对于每一个数组下标 j &#xff0c;当其满足 preSum[j]−preSum[i]goal的条件时&#xff0c;对应 i为一个连续区间&#xff0c;若能够求得 i 的左右边界 left1 与 left2&#xff0c;则此时共有 left…

对接社群团购的风险和坑,其实只有两点

社群团购对接合作的风险和坑&#xff0c;其实只有两点。 让大家更好地了解微信群团购&#xff08;社群团购&#xff09;&#xff0c;正确进入这个领域&#xff0c;借助社群团购进行创业以及货源方通过这个销售渠道进行产品销售。我们将行业的几个关键点进行总结分享&#xff0c…

MongoDB聚合: $skip

$skip聚合阶段用于跳过指定数量的输入文档&#xff0c;并将剩余文档传递到流水线的下一个阶段。 语法 { $skip: <positive 64-bit integer> }使用 $skip需要指定一个正整数来决定跳过的文档数量。从5.0开始&#xff0c;$skip阶段跳过文档的数量限制为一个64位的整数&a…

力扣15-三数之和

三数之和 题目链接 解题思路 1、枚举每个数&#xff0c;表示该数nums[i]已被确定&#xff0c;在排序后的情况下&#xff0c;通过双指针l&#xff0c;r分别从左边l i 1和右边n - 1往中间靠拢&#xff0c;找到nums[i] nums[l] nums[r] 0的所有符合条件的搭配 2、在找符合条…

Python CSV文件读取和写入

本文主要为Python 实现CSV文件读取和写入操作。 CSV文件写入和读取 因为没有现成的csv文件&#xff0c;所以csv的顺序为先写入后读取。 写入 创建csv文件并把数据写入&#xff0c;有两种实现方式&#xff1a;直接插入所有行和插入单行。 示例如下&#xff1a; import csv i…

vim最简单命令学习

安装vim sudo apt install vim在终端随便打开一个文本文件&#xff0c;或者源文件&#xff0c; vim filepath输入该命令后&#xff0c;从终端进入vim编辑器&#xff0c;此时为普通模式(Normal)。 按i键进入编辑模式(Insert)&#xff0c;按Esc键返回普通模式(Normal)。 在编辑…