探讨uniapp的组件使用的问题

1 view

Flex是Flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。
当设置display: flex后,继续给view等容器组件设置flex-direction:row或column,就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局, 因为flex布局有利于跨更多平台,尤其是采用原生渲染的平台。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2 scroll-view

  1. scroll-view是区域滚动,不会触发页面滚动,无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变
  2. 可滚动视图区域。用于区域滚动。
  3. 需注意在webview渲染的页面中,区域滚动的性能不及页面滚动。

在这里插入图片描述

<template><view><page-head title="scroll-view,区域滚动视图"></page-head><view class="uni-padding-wrap uni-common-mt"><view class="uni-title uni-common-mt">Vertical Scroll<text>\n纵向滚动</text></view><view><!-- scroll-top	Number/String		设置竖向滚动条位置 --><!-- scroll-y	Boolean	false	允许纵向滚动 --><!-- @scrolltoupper	EventHandle		滚动到顶部/左边,会触发 scrolltoupper 事件 --><!-- @scrolltolower	EventHandle		滚动到底部/右边,会触发 scrolltolower 事件 --><!-- @scroll	EventHandle		滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} --><scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"@scroll="scroll"><view id="demo1" class="scroll-view-item uni-bg-red">A</view><view id="demo2" class="scroll-view-item uni-bg-green">B</view><view id="demo3" class="scroll-view-item uni-bg-blue">C</view></scroll-view></view><!-- @tap	(event: MouseEvent) => void	-	手指触摸后马上离开 --><!-- @longpress	(event: Event) => void	-	如果一个组件被绑定了 longpress 事件,那么当用户长按这个组件时,该事件将会被触发。 --><view @tap="goTop" class="uni-link uni-center uni-common-mt">点击这里返回顶部</view><view class="uni-title uni-common-mt">Horizontal Scroll<text>\n横向滚动</text></view><view><scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120"><view id="demo1" class="scroll-view-item_H uni-bg-red">A</view><view id="demo2" class="scroll-view-item_H uni-bg-green">B</view><view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view></scroll-view></view><view class="uni-common-pb"></view></view></view>
</template>

自定义下拉刷新

  • 注意,在webview渲染时,自定义下拉刷新的性能不及pages.json中配置的原生下拉刷新。

3

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

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

相关文章

LeetCode——有效的括号

这里&#xff0c;我提供一种用栈来解决的方法&#xff1a; 思路&#xff1a;栈的结构是先进后出&#xff0c;这样我们就可以模拟栈结构了&#xff0c;如果是‘&#xff08;’、‘{’、‘[’任何一种&#xff0c;直接push进栈就可以了&#xff0c;如果是‘}’、‘&#xff09;’…

Windows部署SQL Server-开发者版

一、简介 SQL Server 开发者版本&#xff0c;是一个为开发人员准备的版本。它是免费的&#xff0c;但不能在生产中使用它。它包含所有 SQL Server 企业版的功能&#xff0c;但不能在生产中部署&#xff0c;是一个用于非生产环境的免费版本。 二、下载 访问 https://www.mic…

Zabbix监控系统最新版安装

setenforce 0 设置SELinux 成为permissive模式 临时关闭selinux的 [rootwww yum.repos.d]# curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo % Total % Received % Xferd Average Speed Time Time Time Current …

家长如何将ChatGPT成为家庭日常活动的得力助手

人工智能已经在许多领域发挥作用&#xff0c;如播放音乐、关闭灯光和帮助我们更安全地驾驶。那么&#xff0c;在养育孩子方面呢&#xff1f; 使用像ChatGPT这样的应用&#xff0c;家长们可以更好地完成任务&#xff0c;但同时也要了解其中存在的风险。 许多家长表示&#xff…

mall:redis项目源码解析

文章目录 一、mall开源项目1.1 来源1.2 项目转移1.3 项目克隆 二、Redis 非关系型数据库2.1 Redis简介2.2 分布式后端项目的使用流程2.3 分布式后端项目的使用场景2.4 常见的缓存问题 三、源码解析3.1 集成与配置3.1.1 导入依赖3.1.2 添加配置3.1.3 全局跨域配置 3.2 Redis测试…

java并发:synchronized锁详解

背景&#xff1a; 在java多线程当中&#xff0c;我们总有遇到过多个线程操作一个共享数据时&#xff0c;而这个最后的代码执行结果并没有按照我们的预期一样得到正确的结果。此时我们就需要让代码执行在操作共享变量时&#xff0c;要等一个线程操作完毕时&#xff0c;另一个线程…

Python OCR 使用easyocr库将图片中的文章提取出来

Python OCR 使用easyocr库将图片中的文章提取出来 初环境内容步骤一&#xff1a;安装easyocr库步骤二&#xff1a;导入必要的库步骤三&#xff1a;创建OCR阅读器对象步骤四&#xff1a;指定要识别的图片路径步骤五&#xff1a;执行OCR识别并提取文章内容步骤六&#xff1a;遍历…

记录protocol buffers Mac安装

使用brew安装最新的protobuf 在Mac 上安装&#xff0c;使用brew 可以安装最新的protobuf。这个也比较简单&#xff0c;简单说一下。 首先先检查一下是否安装了brew。如果没有安装brew的话&#xff0c;请先安装brew.可以通过brew --version来检查 使用brew install protobuf 来…

国产化-银河麒麟V10系统及docker的安装

一、最近在研究国产化操作系统&#xff0c;“银河麒麟V10”&#xff0c; 在我电脑本机vmware 15的虚拟机中进行安装测试&#xff1b; 1.点击这里提交产品试用申请&#xff0c;不过只需要随便输入&#xff0c;手机号验证码验证后方可跳转至下载地址产品试用申请国产操作系统、银…

器件介绍TMP1826NGRR、TMP1826DGKR、TMP1827NGRR、TMP1075NDRLR数字温度传感器

一、TMP1826 具有 2Kb EEPROM 的 1-Wire、0.2C 精度温度传感器 器件介绍 TMP1826 是一款高精度、1-Wire 兼容的数字输出温度传感器&#xff0c;具有集成的 2Kb EEPROM 和 –55C 至150C 的宽工作温度范围。TMP1826 在 10C 至45C 的温度范围内提供 0.1C&#xff08;典型值&#…

Pycharm链接远程mysql报错

Pycharm链接远程mysql配置及相应报错如下&#xff1a; 解决方法&#xff1a; 去服务器确认Mysql版本号&#xff1a; 我的Mysql为5.7.43&#xff0c;此时Pycharm mysql驱动为8.0版本&#xff0c;不匹配&#xff0c;所以需要根据实际的版本选择对应的驱动&#xff1b;选择对应的版…

【ArcGIS微课1000例】0071:普通最小二乘法 (OLS)回归分析案例

严重声明:本文来自专栏《ArcGIS微课1000例:从点滴到精通》,为CSDN博客专家刘一哥GIS原创,原文及专栏地址为:(https://blog.csdn.net/lucky51222/category_11121281.html),谢绝转载或爬取!!! 文章目录 一、空间自回归模型二、ArcGIS普通最小二乘法回归(OLS)一、空间自…

一所南方学校,遇上AI的60天

AI大模型的想象力是什么&#xff1f; 有的人认为是参数&#xff0c;有的人可能回答是逻辑和推理&#xff0c;还有的人给出的选项是数据新式表达。 而这些答案&#xff0c;都需要在 一个个真实的产业场景里被实践&#xff0c;被验证。 对谢柏芳和东区中学而言&#xff0c;这个…

Three.js 实现模型材质分解,拆分,拆解效果

原理&#xff1a;通过修改模型材质的 x,y,z 轴坐标 positon.set( x,y,z) 来实现拆解&#xff0c;分解的效果。 注意&#xff1a;支持模型材质position 修改的材质类型为 type“Mesh” ,其他类型的材质修改了position 可能没有实际效果 在上一篇 Three.js加载外部glb,fbx,gltf…

element-table的动态操作,自动以表格,动态新增行、列,删除行列

灵活的自定义表格行列以及增删改查的操作,右键选中列则是列的删除&#xff0c;效果如下 <template><div class"st-table"><div style"width: 100%"><el-button click"addRow()" type"primary" icon"CircleP…

CAM实现的流程--基于Pytorch实现

CAM实现的流程 CAM类激活映射CAM是什么CAM与CNN CAM类激活映射 CAM是什么 可视化CNN的工具&#xff0c; CAM解释网络特征变化&#xff0c;CAM使得弱监督学习发展成为可能&#xff0c;可以慢慢减少对人工标注的依赖&#xff0c;能降低网络训练的成本。通过可视化&#xff0c;就…

springboot+mp完成简单案例

目录 1.框架搭建 2.前端搭建 3.后端编写 需求&#xff1a;完成简单的连表条件查询以及添加即可 1.框架搭建 1.创建springboot项目 2.相关依赖 <!--web依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boo…

3.3.2:SUM作为一般函数及聚合函数的应用

【分享成果&#xff0c;随喜正能量】我们很多道友没受过什么苦&#xff0c;或受不了一句话、一点气&#xff0c;总想悠悠自在成佛。或是念上几十部经就想换取什么&#xff0c;法宝是无价的&#xff01;你拿有价来换&#xff0c;不但换不到&#xff0c;还丧失了功德。应当不退初…

Linux 终端命令之文件目录操作,对比Dos相关命令

目录 前言 基础命令&#xff08;文件目录相关的&#xff09; cd命令 【英文帮助】 【对应Dos命令】 pwd命令 【英文帮助】 【对应Dos命令】 ls命令 【英文帮助】 【对应Dos命令】 tree命令 【英文帮助】 【对应Dos命令】 mkdir命令 【英文帮助】 【对应Dos命令…

ethers.js1:ethers的安装和使用

ethers官方文档&#xff1a;Documentation 1、ethers简介&#xff1a; ethers.js是一个完整而紧凑的开源库&#xff0c;用于与以太坊区块链及其生态系统进行交互。如果你要写Dapp的前端&#xff0c;你就需要用到ethers.js。 与更早出现的web3.js相比&#xff0c;它有以下优点…