微信小程序的视图容器-view

最新推荐文章于 2024-06-01 15:15:00 发布
最新推荐文章于 2024-06-01 15:15:00 发布
阅读量1.1k 收藏
点赞数
文章标签： 博为峰 微信小程序 视图容器 view
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bwf_erg/article/details/72236097
版权
本文介绍了微信小程序中的视图容器view的使用，包括在.wxml和.wxss文件中的应用，展示了如何设置样式和创建高度为300rpx的view。详细解释了rpx作为尺寸单位的自适应原理，以及与px和rem单位的关系。同时，还讨论了多视图容器的实现，并演示了view的事件绑定和在.js文件中响应点击事件的方法。
摘要由CSDN通过智能技术生成
微信小程序的视图容器主要包括是是三个，分别是
1.view
2.scrollView
3.swiper
一、view
view就是视图的意思，类似于html中标签
我们先来写一个简单的view

在.wxml中写一个view


在对应的.wxss文件写headerView的样式


运行结果：在页面显示一个高度为300rpx的view

最低0.47元/天 解锁文章
bwf_erg
关注
微信小程序的视图容器-- scroll-view
03-29
scroll-view:可滚动视图区域 属性名 类型 默认值 说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper ...
2.1.1微信小程序视图容器 view
Eric is a ....
04-22 333
view 视图容器。 属性名 类型 默认值 说明 hover Boolean false 是否启用点击态 hover-class String none 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 hover-start-
小程序组件介绍-视图容器
平凡之路
03-28 1452
额，其实关于小程序的组件介绍，你们完全可以参考:小程序组件。 但是为了更熟悉小程序的开发，我就在新入职的第一天写一下，组件的大致内容。听说，接下来我要负责的是一个小程序商城的项目，应该，会在以后的工作中遇到，和解决一些问题，与诸君分享。类似的介绍内容完全参考小程序提供的内容。 视图容器： view 在小程序里面，我们看不到div这样的标签元素，完全可以把view理为div盒子。在view...
微信小程序 视图容器总结
juse__we的博客
11-05 1031
1view（正常区域） 2scroll-view（区域内，可以做局部滚动） 3swiper（区域内滚动，但基本是整个区域滚动，做的事轮播图之类） 4cover-view（覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-vie...
微信小程序开发初学：视觉容器--view
Dae_Lzh的博客
01-20 1553
view是微信小程序的最基本容器，作用与前端开发中的div容器作用相同，用于存放内容（默认垂直排列）。 view具有的属性 hover-class 类型：String 默认值：none 指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果 示例代码： <view class="title" hover-class="hClass">这是标题</view> .title{ background:blue; } /*普通样式*/ .hClass{ backg
微信小程序视图层WXML_模板
weixin_30634661的博客
07-05 290
微信小程序视图层WXML_模板 微信小程序视图层WXML_小程序模板 微信小程序的WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。 定义微信小程序的模板 使用name属性，作为微信小程序模板的名字。然后在<template/>内定义代码片段，如： <!-- index...
微信小程序的view的属性值和用法
最新发布
suqi_123123的博客
06-01 2370
微信小程序中的 view 组件具有多种属性，用于控制其样式、行为和交互。class / style: 控制视图的样式。hover-stay-time: 控制悬停时的样式和行为。data-xxx: 自定义数据属性，可在 JavaScript 中访问。bindtap / catchtap: 绑定点击事件。animation: 指定动画效果。hidden: 控制视图是否隐藏。控制滚动行为。selectable: 控制文本是否可选中。
微信小程序中scroll-view中不设定高度实现自动滚动
09-17
### 微信小程序中scroll-view实现自动滚动及高度自适应 #### 一、问题背景与需求分析 在微信小程序开发过程中，经常会遇到需要使用`scroll-view`组件来展示可滚动内容的需求。通常情况下，为了使`scroll-view`能够...
微信小程序 ---- 组件应用和实际开发的DEMO
01-09
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的线上服务。本主题聚焦于微信小程序的组件应用与实际开发，通过一系列DEMO来深入理解其核心功能和...
微信小程序-scroll-view横向滚动和上拉加载
03-29
今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。先看最终效果。横向滚动1.设置滚动项display：i ...       最近刚好在集中scroll-view的文章和跳坑指南；  今天介绍微信小程序...
微信小程序View视图容器组件
java1234的博客
05-22 3666
完整微信小程序(Java后端) 技术贴目录清单页面（必看） 微信小程序框架为开发者提供了一系列完备的UI组件,方便开发者快速构建小程序UI界面。借助这些UI组件开发者可以像搭积木一样快速地拼装出一栋房子的样子,这非常类似于当下建筑行业比较流行的装配式建筑,UI组件就好比预先定制好的建筑构件,只需要按照设计图纸即可快速组装各个组件,便捷迅速地完成界面布局和渲染工作。 下方思维导图是小程序的组件，重点掌握核心组件和重点组件，了解扩展； 视图容器 view 视图容器(View)是小程序框架组件中最常见的基础组件
微信小程序--基础内容（详解）（一）
叶子的博客
10-31 8031
微信小程序基础内容，带你快速入门
微信小程序中block和View组件的使用区别
华山论码
11-30 2282
总结来说，block组件主要用于逻辑分组和控制，不会在页面中生成实际节点；而View组件是用于显示内容和布局的，可以设置样式属性，生成实际的节点。
day 1：wxml与wxss的简要理解、view（视图容器）、text（基础内容-文本标签）、navigator（导航-超链接）
m0_47174155的博客
02-06 2515
微信小程序学习day 1：wxml与wxss的简要理解、view（视图容器）、text（基础内容-文本标签）、navigator（导航-超链接）
微信小程序——组件定义及属性（view组件）
Ordinary-life的博客
05-30 8787
小程序定义了各种各样的组件，它们在WXML中起着各不同的作用。与HTML元素一样，一个组件是指从组件开始标签到结束标签的所有代码，由于组件可能会被转译为不同端对应的代码，所以在页面创建过程中，不能使用小程序组件标签以外的标签。 组件定义及属性 1）组件是视图层的基本组成单元 2）组件自带一些功能与微信风格的样式 3）一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内 按类型可以将组件划分为七大类：视图容器、基础内容、表单、导航、多媒体、地图、画布 一个完整的组件结构如下： <
微信小程序wxml和wxss样式
热门推荐
zxhandroid的博客
04-18 2万+
对于css不熟悉的android程序员来说，开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了，它们两者相当于android的布局文件，其中wxml指定了界面的框架结构，而wxss指定了界面的框架及元素的显示样式。 一、wxml 界面结构wxmL比较容易理解，主要是由八大类基础组件构成：
微信小程序 view组件的基本使用
贼厉害
02-04 6711
到这里view基础使用就教学完毕了，有人会说和效果图不一样，其实学到这里就差不多了，后面在给他加入样式就可以改成效果图一样的了。我们会看到页面上出现了三个纵向的ABC，为了方便观看，我们给他三个一个大小，宽高100像素。通过布局改变发现他从纵向修改到横向布局了，这时候在给他加一个元素即可横向平均布局了。为什么会纵向排列而不是横向排列，那是因为view是块元素，能占满整一行。能看图就尽量减少文字提示，从图书可以看出ABC是纵向排列的。这时候 就能看到三个快元素，我们给父级元素改变他的布局形式。
微信小程序 - block 与 view 的区别
卡尔特斯
10-14 7885
在微信小程序开发中 <view>：是一个标签，它会在页面显示出来。 <block>：是一个包装块，也就是代码块，里面可以包装一个专门的代码模块或者模板，但是它不会被显示到页面上，只会将包装的内容显示到页面上。 用 <view> 进行包装 用 <block> 进行包装 这就是 <view> 与 <block> 的主要区别，所以在使用的使用就需要更具自己的需求去进行使用，是否需要外层的包装视图出现，还是只是单纯的用于包..
实现微信小程序中scroll-view与swiper内容切换技巧
资源摘要信息:"在微信小程序中实现scroll-view与swiper组件的联动切换内容功能。通过结合scroll-view组件用于横向滚动显示多个swiper-item，并利用tab栏实现对内容的切换。用户既可以通过滑动tab栏切换内容，也可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值