03-微信小程序常用组件-视图容器组件

news2025/1/20 5:49:00

微信小程序组件-视图容器

文章目录

  • 视图容器
    • view 视图容器
      • 案例代码
    • swiper 滑块视图容器
      • 案例代码
      • indicator-color

微信小程序包含了六大组件: 视图容器基础内容导航表单互动导航。这些组件可以通过WXML和WXSS进行布局和样式设置,从而构建出丰富的小程序界面和交互体验。

  • 其中,视图容器组件包括view和scroll-view等,用于实现页面的结构和滚动效果;
  • 基础内容组件包括text和image等,用于显示文本和图片内容;
  • 表单组件包括button、input和checkbox等,用于实现用户输入和选择;
  • 互动组件包括contact和action-sheet等,用于实现用户之间的互动和操作。

视图容器,相当于html中的div。

微信小程序官方文档-组件

在这里插入图片描述

视图容器

微信小程序视图容器组件包括view和scroll-view等,用于实现页面的结构和滚动效果。

  • 属性
名称功能
cover-image覆盖在原生组件之上的图片视图
cover-view覆盖在原生组件之上的文本视图
grid-viewSkyline 下网格布局容器
list-view列表布局容器,仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点
match-mediamedia query 匹配检测节点
movable-areamovable-view的可移动区域
movable-view可移动的视图容器,在页面中可以拖拽滑动
page-container页面容器
root-portal使整个子树从页面中脱离出来,类似于在 CSS 中使用 fixed position 的效果
scroll-view可滚动视图区域
share-element共享元素
sticky-header吸顶布局容器,仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点
sticky-section吸顶布局容器,仅支持作为 scroll-view 自定义模式下的直接子节点
swiper滑块视图容器
swiper-item仅可放置在swiper组件中,宽高自动设置为100%
view视图容器

view 视图容器

属性说明

属性类型默认值必填说明最低版本
hover-classstringnone指定按下去的样式类。当 hover-class="none" 时,没有点击态效果1.0.0
hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态1.5.0
hover-start-timenumber50按住后多久出现点击态,单位毫秒1.0.0
hover-stay-timenumber400手指松开后点击态保留时间,单位毫秒1.0.0

Bug & Tip

  1. tip: 如果需要使用滚动视图,请使用 scroll-view

案例代码

我们把上一章中新建的页面替换为示例代码

在这里插入图片描述

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

在这里插入图片描述

官网中并没有说明样式代码,我们把以下代码贴到对应的.wxss

  • 样式
/* pages/demo/index.wxss */
.page-section{
margin-bottom: 20rpx;
}
.flex-wrp {display: flex;}
.bc_green {background: green;width:100px; height: 100px;}
.bc_red {background: red;width:100px; height: 100px;}
.bc_blue {background: blue;width:100px; height: 100px;}
  • 效果图

在这里插入图片描述

swiper 滑块视图容器

功能描述

滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

属性说明

Skyline 仅列出与 WebView 属性的差异,未列出的属性与 WebView 一致。

属性类型默认值必填说明最低版本
indicator-dotsbooleanfalse是否显示面板指示点1.0.0
indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色1.1.0
indicator-active-colorcolor#000000当前选中的指示点颜色1.1.0
autoplaybooleanfalse是否自动切换1.0.0
currentnumber0当前所在滑块的 index1.0.0
intervalnumber5000自动切换时间间隔1.0.0
durationnumber500滑动动画时长1.0.0
circularbooleanfalse是否采用衔接滑动1.0.0
verticalbooleanfalse滑动方向是否为纵向1.0.0
previous-marginstring“0px”前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值1.9.0
next-marginstring“0px”后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值1.9.0
snap-to-edgebooleanfalse当 swiper-item 的个数大于等于 2,关闭 circular 并且开启 previous-margin 或 next-margin 的时候,可以指定这个边距是否应用到第一个、最后一个元素2.12.1
display-multiple-itemsnumber1同时显示的滑块数量1.9.0
easing-functionstring“default”指定 swiper 切换缓动动画类型2.6.5
合法值说明default默认缓动函数linear线性动画easeInCubic缓入动画easeOutCubic缓出动画easeInOutCubic缓入缓出动画
bindchangeeventhandlecurrent 改变时会触发 change 事件,event.detail = {current, source}1.0.0
bindtransitioneventhandleswiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}2.4.3
bindanimationfinisheventhandle动画结束时会触发 animationfinish 事件,event.detail 同上1.9.0

change事件 source 返回值

从 1.4.0 开始,change事件增加 source字段,表示导致变更的原因,可能值如下:

  1. autoplay 自动播放导致swiper变化;
  2. touch 用户划动引起swiper变化;
  3. 其它原因将用空字符串表示。

Bug & Tip

  1. tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值,则有可能导致 setData 被不停地调用,因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。
  2. tip: 在 mac 小程序上,若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项,该内置组件可能会出现非预期表现(详情参考 enablePassiveEvent 文档)

案例代码

wxml

<swiper indicator-dots="true" autoplay="true" interval="3000" duration="500">
  <swiper-item>
    <image src="../image/202306001.png" width="375" height="170" />
  </swiper-item>
  <swiper-item>
    <image src="../image/202306002.png" width="375" height="170" />
  </swiper-item>
</swiper>
  • 效果图

在这里插入图片描述

indicator-color

根据属性indicator-color 来设置一个指示点颜色

<swiper indicator-dots="true" autoplay="true" indicator-color="#80ff80" interval="3000" duration="500">
  <swiper-item>
    <image src="../image/202306001.png" width="375" height="170" />
  </swiper-item>
  <swiper-item>
    <image src="../image/202306002.png" width="375" height="170" />
  </swiper-item>
</swiper>
  • 效果图

在这里插入图片描述
下一章节 微信小程序常用组件-基础组件

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

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

相关文章

CFD特性FPmarkets澳福认为了解这11种足够了

CFD在交易中很重要&#xff0c;但CFD特性很多投资者不了解&#xff0c;FPmarkets澳福认为了解这11种足够了&#xff1a; 1. 投资者通过标的资产价格价值的变化获利&#xff0c;而不拥有标的资产。 2. 差价合约交易没有固定的到期日。 3. 与期货交易类似&#xff0c;差价合约交易…

海外问卷脚本机器人哪里哪里有?是真的吗?

大家好&#xff0c;我是橙河老师&#xff0c;今天讲一讲海外问卷项目能不能用脚本操作&#xff1f; 最近没怎么写文章&#xff0c;确实比较忙。我本人每天至少要面对5-10个客户咨询项目&#xff0c;每隔一段时间&#xff0c;都会有人问我&#xff1a;操作海外问卷有没有脚本&a…

文字点选验证码识别(上)-YOLO位置识别

声明 本文以教学为基准、本文提供的可操作性不得用于任何商业用途和违法违规场景。 本人对任何原因在使用本人中提供的代码和策略时可能对用户自己或他人造成的任何形式的损失和伤害不承担责任。 如有侵权,请联系我进行删除。 文章中没有代码,只有过程思路,请大家谨慎订阅。…

集简云简化流程模板,轻松实现工作流程自动化

集简云平台内置大量自动化流程模板&#xff0c;用户可以在“模板中心”搜索应用名称&#xff0c;选择适合自己的场景&#xff0c;直接使用。本期分享集简云自动化工作流程。 模板推荐 模板1&#xff1a;小鹅通新增订单后同步到seatable并更新微伴助手用户信息 集成应用&#…

redis 存储结构原理 1

关于 redis 相信大家都不陌生了&#xff0c;之前有从 0 -1 分享过 redis 的基本使用方式&#xff0c;用起来倒是都没有啥问题了&#xff0c;不过还是那句话&#xff0c;会应用之后&#xff0c;我们必须要究其原理&#xff0c;知其然知其所以然 今天我们来分享一下关于 redis 的…

【网络基础实战之路】VLAN技术在两个网段中的实际应用详解

系列文章传送门&#xff1a; 【网络基础实战之路】设计网络划分的实战详解 【网络基础实战之路】一文弄懂TCP的三次握手与四次断开 【网络基础实战之路】基于MGRE多点协议的实战详解 【网络基础实战之路】基于OSPF协议建立两个MGRE网络的实验详解 【网络基础实战之路】基于…

Matplotlib数据可视化(五)

目录 1.绘制折线图 2.绘制散点图 3.绘制直方图 4.绘制饼图 5.绘制箱线图 1.绘制折线图 import matplotlib.pyplot as plt import numpy as np %matplotlib inline x np.arange(9) y np.sin(x) z np.cos(x) # marker数据点样式&#xff0c;linewidth线宽&#xff0c;li…

揭开区块链地址背后的故事,你需要知道的KYA

作者&#xff5c;Jason Jiang 在区块链世界中&#xff0c;除了交易还有另一个基础要素&#xff1a;地址。在欧科云链日前推出的Onchain AML合规技术方案&#xff0c;也有一个与区块链地址密切相关的概念&#xff1a;KYA&#xff08;Know Your Address&#xff0c;了解你的地址&…

[LitCTF 2023]Ping

因为直接ping会有弹窗。这里在火狐f12,然后f1选禁用javascript,然后ping 然后输入127.0.0.1;cat /flag 得到flag&#xff0c; 查看其他大佬的wp &#xff0c;这里还可以抓包。但是不知道为什么我这里的burp 用不了

数字化转型能带来哪些价值?_光点科技

随着科技的迅猛发展&#xff0c;数字化转型已成为企业和组织的一项重要战略。它不仅改变了商业模式和运营方式&#xff0c;还为各行各业带来了诸多新的机遇和价值。在这篇文章中&#xff0c;我们将探讨数字化转型所能带来的价值。 数字化转型能够显著提升效率和生产力。通过引入…

【React学习】React组件生命周期

1. 介绍 在 React 中&#xff0c;组件的生命周期是指组件从被创建到被销毁的整个过程。React框架提供了一系列生命周期方法&#xff0c;在不同的生命周期方法中&#xff0c;开发人员可以执行不同的操作&#xff0c;例如初始化状态、数据加载、渲染、更新等。一个组件的生命周期…

TCP中窗口和滑动窗口的含义以及流量控制

一.窗口 在TCP中由于要保证可靠性&#xff0c;所以每发送一条数据后&#xff0c;都需要接收方返回一条应答报文&#xff0c;要是我们每发送一条数据&#xff0c;发送方就等待接收应答报文&#xff0c;收到之后再去发送下一条数据&#xff0c;这样我们就会花费大量的时间在等待应…

数据结构-->栈

&#x1f495;休对故人思故国&#xff0c;且将新火试新茶&#xff0c;诗酒趁年华&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;详解链表OJ题 前言&#xff1a; 前面已经学习过顺序表&#xff0c;链表。他们都是线性表&#xff0c;今天要学习的栈也是一种线…

设计模式-观察者模式(观察者模式的需求衍变过程详解,关于监听的理解)

目录 前言概念你有过这样的问题吗&#xff1f; 详细介绍原理&#xff1a;应用场景&#xff1a; 实现方式&#xff1a;类图代码 问题回答监听&#xff0c;为什么叫监听&#xff0c;具体代码是哪观察者模式的需求衍变过程观察者是为什么是行为型 总结&#xff1a; 前言 在软件设计…

变道超车?中国首架电动垂直起降飞行器即将首飞,载人是亮点

根据御风未来的官方消息&#xff0c;他们的首架全国产电动垂直起降飞行器Matrix 1已经顺利完成了各项地面测试&#xff0c;并且即将迎来首次试飞。这款飞行器采用纯电能源&#xff0c;不需要跑道即可起降&#xff0c;并且具备智能化全自主飞行能力&#xff0c;无需飞行驾驶员操…

C++--红黑树

1.什么是红黑树 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树确保没有一条路径会比其他路径长出俩倍&#xff0c;因…

java.net.BindException Address already in use: NET_Bind解决

java.net.BindException Address already in use: NET_Bind 两种解决方法 两种解决方法 (1) kill 占用此端口的线程 查看报错的端口 netstat -ano | findstr 16825tasklist | findstr 1092 如果占用的程序不重要直接kill taskkill /f /pid 16825 (2) 修改启动端口 找一个没…

系统架构设计师-信息安全技术(2)

目录 一、安全架构概述 1、信息安全所面临的威胁 二、安全模型 1、安全模型的分类 2、BLP模型 3、Biba 模型 4、Chinese Wall模型 三、信息安全整体架构设计 1、WPDRRC模型 2、各模型的安全防范功能 四、网络安全体系架构设计 1、开放系统互联安全体系结构 2、安全服务与安…

typedef

t y p e d e f typedef typedef 声明&#xff0c;简称typedef&#xff0c;是创建现有类型的新名字。 比如&#xff1a; #include <bits/stdc.h> using namespace std; typedef long long ll; int main() {ll n;scanf("%lld",&n);printf("%lld"…

共定位数据和环境准备

共定位数据和环境准备 一、数据准备 如果需要做eqtl-GWAS的共定位&#xff0c;则需要按照药靶教程中&#xff0c;将eqtl数据放在smr目录内 如果是纯GWAS-GWAS的共定位&#xff0c;涉及到本地数据的&#xff0c;需要将其整理成模板SNP的格式&#xff0c;并且需要chr&#xff0c…