微信小程序 view组件的基本使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序 view组件的基本使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.view基本理论

微信小程序view,微信小程序,微信小程序,小程序

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

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

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

微信小程序view,微信小程序,微信小程序,小程序

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

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

微信小程序view,微信小程序,微信小程序,小程序

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

微信小程序view,微信小程序,微信小程序,小程序

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

微信小程序view,微信小程序,微信小程序,小程序

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

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

微信小程序view,微信小程序,微信小程序,小程序

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

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

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

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

微信小程序view,微信小程序,微信小程序,小程序

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


.container1{
  display: flex;
}

微信小程序view,微信小程序,微信小程序,小程序

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

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

微信小程序view,微信小程序,微信小程序,小程序

到这里view基础使用就教学完毕了，有人会说和效果图不一样，其实学到这里就差不多了，后面在给他加入样式就可以改成效果图一样的了。这里就不在做详细展示，大家慢慢学习会了解更多小程序前端开发的。文章来源地址https://www.toymoban.com/news/detail-785150.html

到了这里，关于微信小程序 view组件的基本使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！