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

微信小程序开发通常是在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.js

import { 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.js

const 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"
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

NoSQL（非关系型数据库）

NoSQL（非关系型数据库）

目录 前言&#xff1a; 一、NoSQL的类别 1.1 键值&#xff08;key-value&#xff09;存储数据库 1.2 列存储数据库 1.3 文档型数据库 1.4 图形数据库 二、NoSQL适应场景 三、在分布式数据库中的CAP原理 3.1 传统的ACID 3.2 CAP 四、什么是BASE 前言&#xff1a; NoS…
阅读更多...
【数据结构】二叉树链式结构的实现

【数据结构】二叉树链式结构的实现

简单不先于复杂&#xff0c;而是在复杂之后。 文章目录 1. 二叉树链式结构的实现1.1 前置说明1.2 二叉树的遍历1.2.1 前序、中序以及后序遍历1.2.2 层序遍历 1.3 节点个数以及高度等1.4 二叉树基础oj练习1.5 二叉树的创建和销毁 1. 二叉树链式结构的实现 1.1 前置说明 在学习二…
阅读更多...
如何搭建 sqli-labs 靶场保姆级教程（附链接）

如何搭建 sqli-labs 靶场保姆级教程（附链接）

一、环境准备 建议采用虚拟机作为靶场环境的承载平台&#xff0c;以实现更灵活、可定制的配置&#xff0c;提高系统资源的利用效率。这种部署方式不仅能够有效隔离实验环境&#xff0c;降低对真实硬件的依赖&#xff0c;还能够快速搭建和复制实验场景&#xff0c;为安全测试和…
阅读更多...
IGMP——网际组管理协议

IGMP——网际组管理协议

目录 1 IGMP 1.1 IGMP 使用 IP 数据报传递其报文 1.2 IGMP 工作 第一阶段&#xff1a;加入多播组 第二阶段&#xff1a;探询组成员变化情况 1.3 IGMP 采用的一些具体措施&#xff0c;以避免增加大量开销 1 IGMP 标准 1989 年公布的 RFC 1112&#xff08;IGMPv1&#xff…
阅读更多...
总观看量已超千万！新就业形态劳动者新春联谊会成功播出

总观看量已超千万！新就业形态劳动者新春联谊会成功播出

春节到来之际,由中华全国总工会主办,中国海员建设工会、中国国防邮电工会、中国财贸轻纺烟草工会、中华全国总工会文工团联合承办,中国职工发展基金会协办,北京市总工会支持的“温暖有你 共赴美好”2024年新就业形态劳动者新春联谊会,于2月2日晚8点在新华网、央视频、全国总工会…
阅读更多...
Java自救手册

Java自救手册

目录 访问地址 访问地址&#xff0c;发现不通&#xff0c;无法访问&#xff1a; 网络不通一般有两种情况&#xff1a; Maven 拿Maven 拿到Maven以后 Maven单独的报红 Git git注意&#xff1a; 目录 访问地址 访问地址&#xff0c;发现不通&#xff0c;无法访问&…
阅读更多...
Java 使用 ant.jar 执行 SQL 脚本文件

Java 使用 ant.jar 执行 SQL 脚本文件

Java 使用 ant.jar 执行 SQL 脚本文件&#xff0c;很简单。 在 pom.xml 中导入 ant 依赖 <dependency><groupId>org.apache.ant</groupId><artifactId>ant</artifactId><version>1.10.11</version> </dependency>sql 脚本文件…
阅读更多...
《统计学习方法：李航》笔记 从原理到实现（基于python）-- 第6章 逻辑斯谛回归与最大熵模型（2）6.2 最大熵模型

《统计学习方法：李航》笔记 从原理到实现（基于python）-- 第6章 逻辑斯谛回归与最大熵模型（2）6.2 最大熵模型

文章目录 6.2 最大熵模型6.2.1 最大熵原理6.2.3 最大熵模型的学习6.2.4 极大似然估计 《统计学习方法&#xff1a;李航》笔记 从原理到实现&#xff08;基于python&#xff09;-- 第3章 k邻近邻法 《统计学习方法&#xff1a;李航》笔记 从原理到实现&#xff08;基于python&am…
阅读更多...
远程桌面时连接不上远程计算机是什么问题

远程桌面时连接不上远程计算机是什么问题

在服务器上搭建网络程序时&#xff0c;我们经常会有需要远程连接上服务器进行相关操作&#xff0c;有些用户在远程桌面的时候&#xff0c;有时会有遇上无法连接到远程计算机的情况。 很多用户都曾遇到在远程桌面时出现“未启用对服务器的远程访问”、“远程计算机已关闭”、“…
阅读更多...
vit细粒度图像分类（九）RAMS-Trans学习笔记

vit细粒度图像分类（九）RAMS-Trans学习笔记

1.摘要 在细粒度图像识别(FGIR)中&#xff0c;区域注意力的定位和放大是一个重要因素&#xff0c;基于卷积神经网络(cnn)的方法对此进行了大量探索。近年来发展起来的视觉变压器(ViT)在计算机视觉任务中取得了可喜的成果。与cnn相比&#xff0c;图像序列化是一种全新的方式。然…
阅读更多...
【开源】SpringBoot框架开发大学计算机课程管理平台

【开源】SpringBoot框架开发大学计算机课程管理平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 实验课程档案模块2.2 实验资源模块2.3 学生实验模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 实验课程档案表3.2.2 实验资源表3.2.3 学生实验表 四、系统展示五、核心代码5.1 一键生成实验5.2 提交实验5.3 批阅实…
阅读更多...
Mac安装Homebrew+MySQL+Redis+Nginx+Tomcat等

Mac安装Homebrew+MySQL+Redis+Nginx+Tomcat等

Mac安装HomebrewMySQLRedisNginxTomcat等 文章目录 Mac安装HomebrewMySQLRedisNginxTomcat等一、Mac安装Mysql 8①&#xff1a;下载②&#xff1a;安装③&#xff1a;配置环境变量④&#xff1a;外部连接测试 二、Mac安装Redis和可视化工具①&#xff1a;安装Redis01&#xff1…
阅读更多...
c++用户管理信息(类指针数组)

c++用户管理信息(类指针数组)

用户管理信息--类指针数组 类示意图select类示意图MyIterator示意图VetorCstu示意图ClassStu示意图 项目源代码selectselect.hselect.cpp MyIteratorMyIterator.hMyIterator.cpp VetorCstuVetorCstu.hVetorCstu.cpp ClassStuClassStu.hClassStu.cpp main源码 总结---数组管理指…
阅读更多...
Linux Shell命令系列--basename获取基本文件名

Linux Shell命令系列--basename获取基本文件名

一、目的 学习linux shell编程的第一步就是熟悉linux的各种命令的使用&#xff0c;本篇开始逐次介绍一些常用linux shell命令。 今天我们来讲解basename命令的使用。 二、介绍 1、基本概念 basename命令首先去除字符串末尾多余的斜杠&#xff08;如果有的话&#xff09;&#…
阅读更多...
【AG32VF407】国产MCU+FPGA Verilog双边沿检测输出方波

【AG32VF407】国产MCU+FPGA Verilog双边沿检测输出方波

视频讲解 [AG32VF407]国产MCUFPGA Verilog双边沿检测输出方波 实验过程 本次使用使用AG32VF407开发板中的FPGA&#xff0c;使用双clk的双边沿进行检测&#xff0c;同步输出方波 同时可以根据输出的方波检测clk的频率&#xff0c;以及双clk的相位关系&#xff0c;如下为verilog…
阅读更多...
【c++】vector用法详解

【c++】vector用法详解

vector用法详解 vector定义vector容器的构造函数vector容器内元素的访问1.通过下标 [ ]来访问2.通过迭代器来访问3.通过范围for来访问 vector常用函数的用法解析1.size()2.clear()3.capacity()4.reserve()5.resize()6.shrink_to_fit()7.pop_back()8.push_back()9.erase()10.in…
阅读更多...
父类之王“Object”类和内部类

父类之王“Object”类和内部类

&#x1f468;‍&#x1f4bb;作者简介&#xff1a;&#x1f468;&#x1f3fb;‍&#x1f393;告别&#xff0c;今天 &#x1f4d4;高质量专栏 &#xff1a;☕java趣味之旅 欢迎&#x1f64f;点赞&#x1f5e3;️评论&#x1f4e5;收藏&#x1f493;关注 &#x1f496;衷心的希…
阅读更多...
ES6-let

ES6-let

一、基本语法 ES6 中的 let 关键字用于声明变量&#xff0c;并且具有块级作用域。 - 语法&#xff1a;let 标识符;let 标识符初始值; - 规则&#xff1a;1.不能重复声明let不允许在相同作用域内重复声明同一个变量2.不存在变量提升在同一作用域内&#xff0c;必须先声明才能试…
阅读更多...
企查查headers动态加密参数（附代码）

企查查headers动态加密参数（附代码）

声明 本文以教学为基准、本文提供的可操作性不得用于任何商业用途和违法违规场景。 本人对任何原因在使用本人中提供的代码和策略时可能对用户自己或他人造成的任何形式的损失和伤害不承担责任。 如有侵权，请联系我进行删除。 这里只是我分析的分析过程，以及一些重要点的记录…
阅读更多...
c语言：贪吃蛇的实现

c语言：贪吃蛇的实现

目录 贪吃蛇实现的技术前提&#xff1a; Win32 API介绍 控制台程序&#xff08;console&#xff09; 控制台屏幕上的坐标 GetStdHandle GetConsoleCursorInfo CONSOLE_CURSOR_INFO SetConsoleCursorInfo SetConsoleCursorPosition GetAsyncKeyState 宽字符的打印 …
阅读更多...
最新文章

Copyright @ 2022~2023