微信小程序开发-view视图组件

WeChat小程序交流（QQ群：769977169）

效果图示例：左中右排列、左右上右下排列、上左下右下排列。

xxx.wxml中的结构设置

<!--三栏布局：左、中、右-->
<view class='contentLeftCenterRight'><view class='itemSize red'>1</view><view class='itemSize green'>2</view><view class='itemSize blue'>3</view>
</view><!-- 三栏布局：左、上、下--><view class='contentRightTopButtom'><view class='itemSize red' bindtap='clickTap'>单击</view><view class='contentTopButtom'><view class='itemSize green' bindlongtap='longTap'>长按</view><view class='itemSize blue'>3</view></view>
</view> <!--三栏布局：上、左、右--><view class='contentTopLeftRight'><view class='itemSize red' style='color:white;text-align:center;line-height:50px;' bindtouchstart='touchStart' bindtouchend='touchEnd' bindtouchmove='touchMove' bindtouchcancel='touchCancel'>触摸手势</view><view class='contentLeftRight'><view class='itemSize green'>2</view><view class='itemSize blue'>3</view></view>
</view>

xxx.wxss中的样式设置

/* pages/modules/viewPage/view.wxss */
.contentLeftCenterRight{display: flex;justify-content: space-around;align-items: center;
}
.contentLeftCenterRight .itemSize{flex: 1; height:50px;color:white;text-align:center;line-height:50px;font-size:20px;
}.contentRightTopButtom{  display:flex;margin-top:20px;height:100px;
}.contentRightTopButtom>.itemSize{color:white;text-align:center;line-height:100px;font-size:20px;width: 100px;height:100px;
}
.contentTopButtom{flex: 1; display: flex;  justify-content: space-around;align-items: stretch;flex-direction: column;
}
.contentTopButtom .itemSize{flex: 1; align-self: stretch;color:white;text-align:center;line-height:50px;font-size:20px;height:50px;
}.contentTopLeftRight{margin-top: 20px;display: flex;flex-direction: column;height: 100;
}
.contentTopLeftRight>.itemSize{flex: 1;height: 50px;
}
.contentLeftRight{flex: 1; display: flex;justify-content: space-around;align-items: stretch;  flex-direction: row; height: 50px;
}
.contentLeftRight .itemSize{flex: 1;height: 50;
}.yellow{background-color: yellow;
}
.red{background-color: red;
}
.green{background-color: green;
}
.blue{background-color: blue;
}

微信小程序开发-view视图组件相关推荐

微信小程序开发之——map组件
一概述 wx.getLocation获取用户当前位置信息 map组件的基础属性(显示带有方向的当前定位点,显示指南针,开启卫星图) map添加标记点marker 二 map使用-当前不是定位位置 2 ...
微信小程序开发：自定义组件-behaviors
1.什么是behaviors behaviors是小程序中,用于实现组件间代码共享的特性,类似于vue的"mixins". 2.behaviors的工作方式每个behavior可 ...
微信小程序开发之向组件传值的三种方式
一. 直接传值向组件custom-component传值的页面  <custom-component my-value="hello&q ...
微信小程序开发之——视图全屏显示
一概述本文介绍两种将view全屏显示的方式: 布局文件设置宽度和高度代码中获取到屏幕的宽度和高度,设置到view上二布局设置宽高全屏 2.1 布局文件(index.wxml) <vie ...
微信小程序开发demo
前言链接: https://pan.baidu.com/s/16j8WCMv2JrRK2OzwvMwZ1w 提取码: 34mp 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么 ...
微信小程序开发系列二：微信小程序的视图设计
大家如果跟着我第一篇文章微信小程序开发系列一:微信小程序的申请和开发环境的搭建一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...
微信小程序开发学习5（自定义组件）
微信小程序开发学习5(自定义组件) 1.学习目标能够知道如何自定义小程序组件能够知道小程序组件中behaviors的作用能够知道如何安装和配置vant-weapp组件库能够知道如何使用MobX ...
微信小程序开发学习4（视图与逻辑）
微信小程序开发学习4(视图与逻辑) 1.学习目标能够知道如何实现页面之间的导航跳转能够知道如何实现下拉刷新效果能够知道如何实现上拉加载更多效果能够知道小程序中常用的生命周期函数 2.页面导航 ...
微信小程序开发教程：项目五导航组件课后习题
<微信小程序开发教程>主编/黄寿孟易芳陶延涛湖南大学出版社目录一.单选题二.多选题三.判断题四.填空题五.简答题简述如何动态设置窗口的背景色. 六.编程题 1.设计一款 ...
wxml报错原因_微信小程序开发教程（八）视图层——.wxml详解
框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.w ...

微信小程序开发-view视图组件

微信小程序开发-view视图组件相关推荐

最新文章

热门文章