微信小程序 view组件的基本使用

news2025/1/17 1:01:28

1.view基本理论

能看图就尽量减少文字提示,从图书可以看出ABC是纵向排列的。

为什么会纵向排列而不是横向排列,那是因为view是块元素,能占满整一行。

怎么让view块元素横向并排呢?

 向上图一样横向排列,接下来教学从0开始

高手看看即可,小白咱们是一条船上的,一起来学。

 先打开全局app.json 在 pages里面写入一个全新的路径,保存app.json文件后会在pages路径中自动生产配套文件如下:

我们先打开list.wxml给他定义一个大盒子view  属性是container1 如图

 接着给他三个盒子元素内容为A B C如图

<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

 我们会看到页面上出现了三个纵向的ABC,为了方便观看,我们给他三个一个大小,宽高100像素

文字居中,文字行高100像素 外加一个背景颜色

这是后需要用到。list.wxss文件了

.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: lightskyblue;
}

这时候 就能看到三个快元素,我们给父级元素改变他的布局形式


.container1{
  display: flex;
}

 通过布局改变发现他从纵向修改到横向布局了,这时候在给他加一个元素即可横向平均布局了

.container1{
  display: flex;
  justify-content: space-around;
}

 到这里view基础使用就教学完毕了,有人会说和效果图不一样,其实学到这里就差不多了,后面在给他加入样式就可以改成效果图一样的了。这里就不在做详细展示,大家慢慢学习会了解更多小程序前端开发的。

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

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

相关文章

Kerberos协议与认证数据包分析

Kerberos协议 Kerberos是一种在开放的非安全网络中认证并识别用户身份信息的方法, 它旨使用密钥加密技术为客户端/服务端应用程序提供强身份认证。 目前主流的Kerberos版本是2005年的RFC4120标准的Kerberos v5, Windows、Linux和MacOs均支持Kerberos协议。Kerberos基础 Kerbe…

Quartz入门看这一篇文章就够了

第一章 Quartz简介 第一节 Quartz是什么? 1Quartz [kwɔːts]是一个完全由Java编写的开源的作业调度框架第二节 Quartz可以用来做什么? 比如说买火车票下单之30分钟之后,查看是否付款付款完成之后,在乘车日期的时候是否乘车或者每个月1号扣房贷每个月20号自动还信用卡想定时…

为什么要使用采购管理软件 采购管理软件推荐

在企业发展道路上&#xff0c;采购部门是一个非常重要的组织&#xff0c;它会直接影响到企业的经济效益。企业在采购活动中&#xff0c;如果还是采用传统线下的采购方式&#xff0c;那么很容易导致采购信息不集中&#xff0c;效率低&#xff0c;出错率高&#xff0c;最终损害企…

爱情呼叫转移-深度广度遍历合集

1.这件事是特殊的&#xff0c;还是普遍的&#xff1f; 工作中常常会遇到各种各样的问题&#xff0c;不管黑猫白猫&#xff0c;抓到老鼠就是好猫。哪只猫好&#xff0c;往往需要对比分析。 如何做数据对比&#xff0c;需要加入哪些数据来分析&#xff0c;在哪里进行数据对比&am…

查找 二分查找 (终极巩固)

二分条件&#xff1a; 1) 序列有序 2&#xff09;支持随机访问 二分思想&#xff1a; 大体思想是二分之后如果目标值在左侧&#xff0c;则中间包括右边区间所有pass掉 right mid - 1; 目标在右侧&#xff0c;则中间包括左边所有pass left mid 1; 注意点 left < rig…

Python Fiddler抓包工具教学,获取公众号(pc客户端)数据

前言 今天来教大家如何使用Fiddler抓包工具&#xff0c;获取公众号&#xff08;PC客户端&#xff09;的数据。 Fiddler是位于客户端和服务器端的HTTP代理&#xff0c;是目前最常用的http抓包工具之一。 开发环境 python 3.8 运行代码pycharm 2021.2 辅助敲代码requests 第三方…

VS2022 开发Qt之修改软件图标

开发环境本次实验使用的开发环境是win10 64位系统 IDE使用VS2022,Qt版本是Qt5,15.写博客背景最近再练习使用VS开发Qt,到修改软件图标的事情.在网上搜索了一番大部分修改图标的都是基于Qt自带的编译器,由于本人使用的VS的IDE和自带的编译器设置方法有所不同,在一番查找实验后还整…

【论文学习】YOLOv1-YOLOv4

文章目录You Only Look Once,Unified ,Real-Time Object DetectionAbstractIntroductionUnified DetectionNetwork DesignTrainingInferenceLimitations of YOLOComparison to Other Detection SystemsYOLO9000:Better,Faster,StrongerAbstractIntroductionBetterBatch Normali…

【C++之类和对象】日期类的实现

目录前言一、日期类的基本样式二、构造函数三、拷贝构造函数四、赋值运算符重载五、日期比较1. 判断一个日期是否小于另一个日期2. 判断一个日期和另一个日期是否相等3. 判断一个日期是否小于等于另一个日期4. 判断一个日期是否大于另一个日期5. 判断一个日期是否大于等于另一个…

独孤九剑xss通关教程

独孤九剑xss通关教程 独孤九剑第一式&#xff1a; 这里过滤了 () 构造payload&#xff1a; ?data"><svg><script>%26%23x65%3B%26%23x76%3B%26%23x61%3B%26%23x6c%3B%26%23x28%3B%26%23x6c%3B%26%23x6f%3B%26%23x63%3B%26%23x61%3B%26%23x74%3B%26%23…

开门红,农民大衣哥兔年第一条祝福,为何在百万艺人中选择杨语莲

俗话说&#xff1a;人逢喜事精神爽。这句话用到农民歌唱家大衣哥身上&#xff0c;就再贴切不过了&#xff0c;因为在新年即将来临之际&#xff0c;他的儿子小伟又一次结婚了。大衣哥是一个非常接地气的明星&#xff0c;这些年来他无绯闻不炒作&#xff0c;堪称为娱乐圈的楷模&a…

开学季,送初三学生什么礼物最实用?2023学生护眼台灯分享

春节的新学期即将到来&#xff0c;送给初中孩子什么礼物比较好呢&#xff0c;还是要对学习有所帮助的&#xff0c;还需要培养孩子的兴趣&#xff0c;在挑选礼物时&#xff0c;也是斟酌了很久&#xff0c;面对现在很多孩子的有近视问题&#xff0c;在我国的近视人数达到7亿人&am…

java面试题(十一)IO流篇

2.21 请介绍TreeMap的底层原理 参考答案 TreeMap基于红黑树&#xff08;Red-Black tree&#xff09;实现。映射根据其键的自然顺序进行排序&#xff0c;或者根据创建映射时提供的 Comparator 进行排序&#xff0c;具体取决于使用的构造方法。TreeMap的基本操作containsKey、g…

三维重建——商汤NeuralRecon算法详解与论文解读

论文地址:https://arxiv.org/abs/2104.00681 1.三维重建任务概述 三维重建,就是将2D的图片信息重建为3D的信息。应用领域广泛。可以应用于原型设计、虚拟现实等。 2.三维重建基础 (1) 相机成像 相机成像一般是小孔成像的原理,f就是焦距,o就是光圈;右图为光圈大小对清晰…

【多尺度注意力的轻量化图像超分辨率】

MSAR-Net: Multi-scale attention based light-weight image super-resolution &#xff08;MSAR-Net&#xff1a;基于多尺度注意力的轻量化图像超分辨率&#xff09; 近年来&#xff0c;单幅图像超分辨率&#xff08;SISR&#xff09;技术在视频和图像处理领域得到了广泛的应…

Python基础语法预习,开学查漏补缺

嗨害大家好鸭~我是小熊猫 Python3 基础语法 Python学习资料电子书 点击此处跳转文末名片 编码 默认情况下&#xff0c;Python 3 源码文件以 UTF-8 编码&#xff0c; 所有字符串都是 unicode 字符串。 当然你也可以为源码文件指定不同的编码&#xff1a; # -*- coding: cp-125…

(HR职场)什么是计划能力?如何提高计划能力?

不论是学习还是工作&#xff0c;光靠努力是不行的&#xff0c;还得有计划&#xff0c;有周密的部署&#xff0c;懂得按计划做事情的人&#xff0c;不仅可以高效率地完成工作&#xff0c;还能在枯燥的工作中寻找到乐趣。这就是做计划的意义和必要性。当然光有计划也不行&#xf…

ArcGIS基础:将多个面要素融合成一个多边形面要素操作

操作目标&#xff1a;有多个多边形要素&#xff0c;并且字段属性没有统一的&#xff0c;可以采用以下两种办法融合成一个面要素。 如下所示&#xff0c;是对被选中的高亮数据进行处理的。 下面介绍第一种方法&#xff1a; 保持数据选中状态&#xff0c;找到【地理处理】下的…

Codeforces Round #849 (Div. 4) D Distinct Split

题目&#xff1a;大概翻译&#xff1a;让我们把一个字符串x的f(z)函数表示为该字符串包含的不同字符数。例如&#xff0c;f(abc)3。f(bbbb) 1, 和 f(babacaba) 3. 给定一个字符串s&#xff0c;将其分成两个非空字符串a和b&#xff0c;使f(a)f(b)为最大可能。换句话说&#xf…

2023软考软件设计师易混淆知识点~(7)

将2023上半年软考《软件设计师》易混淆知识点&#xff0c;分享给大家&#xff0c;快来跟着一起打卡学习吧&#xff01;--<<<点击链接加入群聊【软考学习交流群】>>>易混淆点 :对称加密和非对称加密1、对称加密技术:KeKd;加密解密共用一个密钥;特点:加密强度不…