微信小程序:布局样式

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

效果

微信小程序:布局样式,微信小程序,微信小程序,notepad++,小程序文章来源地址https://www.toymoban.com/news/detail-758440.html

wxml

<view class="layout">
    <view class="left">
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    <view>1</view>
    </view>
    <view class="right">
      <view class="right-item1">2</view>
      <view class="right-item2">3</view>
    </view>
</view>

wxss

.layout {
  width: 100%;
  display: flex;

}
.left {
  width: 50%;
  background-color: #6ba2e0;
}

.right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.right-item1 {
  flex: 1;
  background-color: #8bc34a;
}

.right-item2 {
  flex: 1;
  background-color: #ce8adf;
}

到了这里,关于微信小程序:布局样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 6、微信小程序的布局

    wxss 指的是 Wei Xin Style Sheet,微信团队定义的一套用以实现小程序布局样式的层叠样式表,与CSS非常接近。可以理解成 wxss 是 css 的一个子集,也包括选择器、属性、值部分,同样具有层叠的特征。 小程序会自动根据 wxml 文件名,自动将 wxss 进行加载,例如 当加载 pages/style/

    2024年02月10日
    浏览(35)
  • 微信小程序之Flex布局

    (1)主轴【main axis】:默认为水平方向; (2)交叉轴【cross axis】:垂直于主轴,默认为竖直方向; (3)通过修改使垂直方向变为主轴,水平方向变为交叉轴 任何一个容器都可以被指定为 flex 布局,简单说来,如果你使用块元素如 div,你就可以使用 flex,而如果你使用行内

    2024年02月11日
    浏览(50)
  • 微信小程序的页面布局(1)

    微信小程序的页面布局主要用到两个文件,wxml(摆放各种组件)和wxss(设计排版) 因此,我们首先将要用到的组件按照一定的组织排序扔进wxml文件里,什么叫组织排序呢,这里注意就是组件与组件之间的包容关系,例如,1号框架里想有三行模块2,每个模块2里有2个模块3,

    2024年02月11日
    浏览(53)
  • 微信小程序修改placeholder样式

    微信小程序有既定的修改placeholder的标签

    2024年04月10日
    浏览(55)
  • 微信小程序 样式和全局配置

    wxss 把屏幕分为750个物理像素,大屏大,小屏小,随着设备不一致自动适配 推荐使用iPhone6作为标准,1个rpx = 0.5个px,把px乘以2就是rpx的参数 导入外部样式表  样式  权重一样时,局部样式可以覆盖全局样式 导航栏区域 navigationBar 背景区域 backgroud 页面主体区域 可以配置【导

    2024年02月07日
    浏览(50)
  • 微信小程序-----wxss模版样式

    目录 前言 一、WXSS 1. 什么是 WXSS 2. WXSS 和 CSS 的关系 二、rpx 1. 什么是 rpx 尺寸单位 2. rpx 的实现原理 3. rpx 与 px 之间的单位换算 三、样式导入 1. 什么是样式导入 2. @import 的语法格式 四、全局样式和局部样式 1. 全局样式 2. 局部样式         上一期我们学习了wxml的模版语法,

    2024年01月17日
    浏览(65)
  • 微信小程序九宫格布局,轮播图

    在微信小程序中,可以使用 view 标签来实现九宫格布局。具体步骤如下: 在wxml文件中,使用 lt;view 标签设置一个容器。例如: 使用CSS样式来设置 grid-container 类的样式,使其成为九宫格布局。例如: 在 view 标签中放置具体内容。例如,线上教育小程序的九宫格布局页面代码

    2024年01月16日
    浏览(57)
  • 微信小程序布局图片上面显示文字

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2023年04月08日
    浏览(40)
  • 微信小程序第三章(页面布局)

     了解盒子模型的基本原理  掌握浮动与定位  熟练掌握flex布局方式 微信小程序的视图层由WXML和WXSS组成。其中,WXSS(WeiXin StyleSheets)是基于CSS拓展的样式语言,用于描述 WXML的组成    一边框(bomder) 样式,决定WXML的组件如何显示wxss具有    外边距    CSS的大部分特性,因

    2024年03月21日
    浏览(49)
  • 第三章:微信小程序页面布局

    微信小程序的视图层由WXML和WXSS组成,其中,WXSS是基于CSS拓展的样式语言,用于描述WXML的组成样式,决定WXML的组件如何显示。 盒子模型就是我们在页面设计中经常用到的一种思维模型。一个独立的盒子模型由内容、内边距、边框和外边距4个部分组成。 此外,对padding、bor

    2024年04月09日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包