微信小程序view标签以及display:flex的测试
一:testview.wxml,testview.js自动生成示例代码
//testview.wxml
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="display:flex; flex-direction:row;">
<view class="flex-item bc_green" style="background-color:green">1</view>
<view class="flex-item bc_red" style="background-color:red">2</view>
<view class="flex-item bc_blue" style="background-color:blue">3</view>
</view>
</view>
<view class="section">
<view class="section__title">flex-direction: column</view>
<view class="flex-wrp" style="display:flex;height: 300px;flex-direction:column;">
<view class="flex-item bc_green" style="background-color:green">1</view>
<view class="flex-item bc_red" style="background-color:red">2</view>
<view class="flex-item bc_blue" style="background-color:blue">3</view>
</view>
</view>
二:testview.wxss
//testview.wxss
.flex-item{
display: flex;
height: 50px;
width: 50px;
align-items: center;
justify-content: center;
border: 1px solid orange;
}
三:app.json上配置页面路径,效果如下
微信小程序view标签以及display:flex的测试的更多相关文章
- 微信小程序 View:flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
- 微信小程序实现标签页滑块效果
微信小程序实现标签页滑块效果 小程序完整代码: wxml: <view class="swiper-tab"> <view class="swiper- ...
- Java的家庭记账本程序(H) :微信小程序 image 标签,在模拟器中无法显示图片?(已解决)
日期:2019.2.25 博客期:036 星期一 吼!今天我还是继续研究了自己的微信小程序,还没有连接数据库,只是在xml的设计上添加了不少东西,大家可以看我的截图,嗯~说到今天的收获,就是 marg ...
- 微信小程序开发之搞懂flex布局2——flex container
容器的概念,是用来包含其它容器(container)和项目(item). flex container——flex容器 A flexbox layout is defined using the fl ...
- 微信小程序text标签
最近在做小程序,使用<text>标签的时候发现里面的文本text-family不生效, 经过试验,发现直接在text标签的class设置不生效,可以在外层包一个父元素就可以设置了. < ...
- 微信小程序-view组件
<view class="section"> <view class="section__title">flex-direction: ...
- 微信小程序 view 布局
刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单. 主要属性: flex-direction: 主要两个特性”row” ...
- 微信小程序 view中的image水平垂直居中
当 display: flex 配合 justify-content: center 使用时可以让view水平居中 而配合 align-items: center 用时可以实现垂直居中效果 .card ...
- 微信小程序的标签和html标签比较
html 小程序 <div></div> <view></view> <h1><h2>....<h6> <p& ...
随机推荐
- Mook第八周习题 单词长度(4分)(1)题
题目内容: 你的程序要读入一行文本,其中以空格分隔为若干个单词,以'.'结束.你要输出这行文本中每个单词的长度.这里的单词与语言无关,可以包括各种符号,比如"it's"算一个单词, ...
- Android绘画板(普通绘画模式和缩放平移绘画模式)
ScaleSketchPadDemo 项目地址: demo apk体验下载 demo2 apk体验下载 用法: 进入项目根目录:https://github.com/ShaunSheep/ScaleS ...
- 一篇深入剖析PCA的好文
主成分分析(Principal components analysis)-最大方差解释 在这一篇之前的内容是<Factor Analysis>,由于非常理论,打算学完整个课程后再写.在写这 ...
- 使用正则移除尖括号<>中的指定子字符串
"; string input = "dfsdfsd<在OA中申请Annual Leaveaaaa公司年假 1.0天,申请单号1311160122251><在OA ...
- mysql 获取原数据
show databases show tables information_schema show tables 语句的输出不包含temporary表 查看服务器所有数据库 >show ...
- Yii2 报错Getting unknown property: app\models\Product::
解决方法:查看是否存在 "$a->$abc"的写法,应改成$a->abc
- C#异步编程(async and await)及异步方法同步调用
1.什么是异步? 异步操作通常用于执行完成时间可能较长的任务,如打开大文件.连接远程计算机或查询数据库=异步操作在主应用程序线程以外的线程中执行.应用程序调用方法异步执行某个操作时,应用程序可在异步方 ...
- PyQt4简单小demo
#coding=utf-8 import sys from PyQt4.QtCore import * from PyQt4.QtGui import * class FontPropertiesDl ...
- Thinkjs使用ajax实现表单提交
//前端代码 1 $('form').submit(evt=>{ evt.preventDefault();//阻止表单默认提交 $.ajax({ url: '/user/personal/up ...
- javascript基础进阶——执行环境及作用域链
概念 执行环境 执行环境定义了变量或函数有权访问的其他函数,决定了他们各自的行为.每个执行环境都有一个与之关联的变量对象. 变量对象 环境中定义的所有变量和函数都保存在这个对象中. 全局执行环境 全局 ...