微信小程序常用视图容器组件
微信小程序常用视图容器组件
- 1、组件概述
- 2、常用的试图容器组件
- 2.1 view
- 2.1.1 案例
- 2.2 scroll-view
- 2.2.1 案例
- 2.3 swiper
- 2.3.1 案例
1、组件概述
组件是视图层基本的组成单元,具备UI风格样式以及特定的功能效果。当打开某款小程序之后,界面中的图片、文字等元素都需要使用组件,小程序组件使用灵活,组件之间通过相互嵌套进行界面设计,开发者可以通过组件的选择和样式属性设计出不同的界面效果。一个组件包括开始标签和结束标签,属性用来装饰这个组件的样式。
其语法格式如下:
<标签名称 属性="值">
内容
</标签名称>
2、常用的试图容器组件
视图容器(View Container)组件用于排版页面为其他组件提供载体。常用视图容器有View、scroll-view和swiper等等。
2.1 view
view容器是页面中最基本的容器组件,通过高度和宽度来定义容器大小。<view>
相当于HTML种的<div>
标签,是一个页面中最外层的容器,能够接受其他组件的嵌入,例如,多个view容器的嵌套。view容器可以通过flex布局定义内部项目的排列方式。
属性如下表所示
2.1.1 案例
本例设计了两组父子view容器的点击态,第一组父子view容器种子view容器不阻止点击态向父容器传递,第二组父子view容器中子view容器阻止点击态向父容器传递,
pages/view/view.wxml代码如下:
<view class="demo-box"><view class="title">1.view小案例</view><view class="title">(1)不阻止父容器的view-hover</view><view class="view-parent" hover-class="view-hover">我是父类容器<view class="view-son" hover-class="view-hover">我是子类容器</view></view><view class="title">(2)阻止父容器的view-hover</view><view class="view-parent" hover-class="view-hover">我是父类容器<view class="view-son" hover-class="view-hover" hover-stop-propagation hover-start-time="3000" hover-stay-time="4000">我是子类容器</view></view>
</view>
pages/view/view.wxss代码如下:
.view-parent {width: 100%;height: 350rpx;background-color: pink;text-align: center;
}
.view-son {width: 50%;height: 200rpx;background-color: skyblue;margin: 20rpx auto;text-align: center;
}
.view-hover {background-color: red;
}
app.wxss
.demo-box {padding: 20rpx;margin: 20rpx 60rpx;border: 1rpx solid gray;
}
.title {display: flex;flex-direction: row;margin: 20rpx;justify-content: center;
}
页面初始效果
点击第1组子容器
点击第2组子容器
在view.wxml种放置两组
<view>
容器,在app.wxss文件中设置父容器背景色为浅红色,子容器背景色为浅蓝色,通过hover-class="view-hover"为标签增加属性,点击态均设置为点击后背景色更新为红色,第一组不阻止点击态传递给父容器,在第二组子类容器种通过hover-stop-propagation来组织点击态传递给父容器,并设置属性hover-start-time=“3000”,hover-stay-time=“4000”,当点击子容器时,3s后出现点击状态,当手指松开4ss后,子容器背景色编为初始颜色。
2.2 scroll-view
scroll-view容器为可滚动的视图容器,允许用户通过手指在容器上滑动来改变显示区域,常见的滑动方向有水平滑动和垂直滑动。其属性表如下所示。
注意:在使用纵向滚动时,需要为设置一个固定宽度
2.2.1 案例
pages/scroll-view/scroll-view.wxml
<view class="demo-box"><view class="title">2.scroll-view小案例</view><view class="title">实现纵向滚动</view><scroll-view scroll-y><view class="scroll-item-y">元素一</view><view class="scroll-item-y">元素二</view><view class="scroll-item-y">元素三</view><view class="scroll-item-y">元素四</view><view class="scroll-item-y">元素五</view><view class="scroll-item-y">元素六</view></scroll-view>
</view>
pages/scroll-view/scroll-view.wxss
scroll-view {height: 600rpx;width: 250rpx;margin: 0 auto;
}
.scroll-item-y {height: 200rpx;line-height: 200rpx;text-align: center;background-color: skyblue;border: 1px solid gray;
}
本例在scroll-view.wxml文件中设置组件,通过设置属性scroll-y,允许组件上下滑动,在scroll-view.wxss文件中设置其高度为600rpx,使得scroll-view组件能够纵向滑动,在中嵌套6组用于显示滚动效果,内部元素宽度均为250rpx。
滑动前:
滑动后:
2.3 swiper
<swiper>
组件为滑块视图容器,通常用于图片之间的切换播放,被形象得称为轮播图。其属性表如图所示。
2.3.1 案例
效果图:
pages/swiper/swiper.wxml
<view class="demo-box"><view class="title">3.swiper小案例</view><view class="title">图片进行翻页切换</view><swiper indicator-dots autoplay interval="3000"><swiper-item><image src="/images/cat1.jpg"></image></swiper-item><swiper-item><image src="/images/cat2.jpg"></image></swiper-item><swiper-item><image src="/images/cat3.jpg"></image></swiper-item></swiper>
</view>
pages/swiper/swiper.wxss
swiper {height: 350rpx;
}
本例在swiper.wxml文件中放置
<swiper>
组件,组件属性autoplay允许自动切换图片,设置属性interval=“3000”,图片每隔3s发生一次切换,属性indicator-dots用于显示面板知识点,<swiper>
组件中嵌套3组<swiper-item>
,swiper容器高度设置为300rpx。
更多视图容器组件请查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
微信小程序常用视图容器组件相关推荐
- 微信小程序View视图容器组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 微信小程序框架为开发者提供了一系列完备的UI组件,方便开发者快速构建小程序UI界面.借助这些UI组件开发者可以像搭积木一样快速地拼装出一栋房 ...
- 微信小程序常用表单组件
微信小程序常用表单组件 1.常用表单组件 1.1 button 1.2 checkbox 1.3 input 1.4 label 1.5 form 1.6 radio 1.7 slider 1.8 s ...
- 开发微信小程序,常用的开发组件有哪些?
随着微信小程序开发的持续升温,小程序开发也变得越来越流行,因为小程序不仅能帮助企业解决推广的问题,还能为企业带来可观的收益.但是很多企业并不知道如何开发微信小程序,而市面上的开发组件又有很多种,不知道 ...
- 微信小程序之视图容器(swiper)组件创建轮播图
一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...
- 微信小程序-view(视图容器)
示例 <view class="section"><view class="section__title">flex-direction ...
- 微信小程序的视图容器—swiper
2019独角兽企业重金招聘Python工程师标准>>> swiper滑动面板(又称滑块视图容器,常见的轮播图) 属性名 类型 默认值 说明 indicator-dots Boole ...
- 微信小程序---常用的指令/组件
1. 指令 1.1 wx:for指令 1.1.1 html 1. 内置了一个index/item,前者索引,后者元素 <view wx:for="{{ data_list }}&quo ...
- 微信小程序 滑块视图容器
效果图如下: 完成以上效果需: wxml部分: <view class="nav"><block wx:for="{{styles}}" wx ...
- 微信小程序开发系列二:微信小程序的视图设计
大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...
最新文章
- 绿色版mysql安装步骤
- 【探索PowerShell 】【三】PowerShell下使用Aliases
- 北斗词卡(三):带你了解北斗相关的国际组织缩写
- springboot整合redis操作缓存(将查询到的数据放在缓存中)
- 求组合数的算法 java,求一个整数的组合数算法(java)
- 【机器学习】传统目标检测算法总结
- 在c语言程序中 对文件进行操作首先要,《C语言程序设计》试题八及答案
- MySQL自动化审核平台部署说明
- 百度押注AI有了大回报,李彦宏首次披露Apollo如何赚钱
- 【吴恩达机器学习】学习笔记——1.3机器学习的定义
- bigdecimal 减_市市场监管局多措并举推进高频事项“减时效”
- 我悲惨的人生,该死的UPX壳,谁能救救我
- 移动健康应用观察:快速问医生的“Web 10年功”
- mac移动硬盘未装载解决方案
- SaaS启动阶段增长指南(上)
- C语言实现哥德巴赫猜想
- 新浪微博模拟登陆passwd参数rsa解密
- 8086的两种工作模式_8086系统中最小模式与最大模式两种工作方式的主要区别是什么?...
- 逻辑回归原理及推导过程
- python实现购物车总结,Python实现的购物车功能示例
热门文章
- jQuery基础:选择器、动画、DOM操作和事件等
- mac 小程序开发者工具。 tunneling socket could not be established
- 美国犹他大学计算机专业怎么样,犹他大学最热门专业,了解一下?
- 快来领取哔哩哔哩855张官方壁纸(2021年02月16日更新,附爬虫工具)
- 回味那些评论有时候也能受教--摘自双鱼座ROM之硬件评论
- 软件需求分析与IT创新
- cadence 页间连接符标号的 删除,添加,更新
- 你可能不知道的关于Oracle Rac的事...
- about a day and a story
- 现代计算机eniac的诞生,eniac诞生于哪一年(第一台电脑eniac诞生在哪国)