零基础学做网站培训介绍

当前位置:

微信小程序view组件布局方法

以下为学做网站论坛关于“微信小程序view组件布局方法”讲解视频教程。

VIEW组件是微信小程序特别常用的一个组件,它是布局前端的一个组件。 VIEW相当于HTML中的DIV,它可以嵌套来布局页面。 在WXSS中,可以直接控制view组件的样式,也可以给view组件使用class起名,然后控制。

课程中使用的样式代码:

  • width 宽度 100% 表示全屏宽度
  • height 高度
  • background 背景

如果使用nvue,则需注意,包裹文字应该使用组件。

属性说明

属性名 类型 默认值 说明
hover-class String none 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态
hover-start-time Number 50 按住后多久出现点击态,单位毫秒
hover-stay-time Number 400 手指松开后点击态保留时间,单位毫秒

以下示例代码,来自于hello uni-app项目,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可快速体验完整示例。


<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
flex-direction: row
<text>n横向布局</text>
</view>
<view class="uni-flex uni-row">
<view class="flex-item uni-bg-red">A</view>
<view class="flex-item uni-bg-green">B</view>
<view class="flex-item uni-bg-blue">C</view>
</view>
<view class="uni-title uni-common-mt">
flex-direction: column
<text>n纵向布局</text>
</view>
<view class="uni-flex uni-column">
<view class="flex-item flex-item-V uni-bg-red">A</view>
<view class="flex-item flex-item-V uni-bg-green">B</view>
<view class="flex-item flex-item-V uni-bg-blue">C</view>
</view>
</view>
</view>
</template>

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 如何注册微信小程序 图文教程 (110548 次浏览)
    要发布自己的微信小程序,首先需要在微信公众平台上注册微信小程序。注册步骤 登录“微信公众平台”,如果还没有账号,可以先注册一个。登录地址
  • 微信小程序开发授权 图文教程 (112001 次浏览)
    我们在“微信公众平台”注册好了小程序之后,接下来的工作就是开发微信小程序了。开发微信小程序前,我们需要进行授权。方法/步骤 点击“细致微信
  • 插件介绍自己做网站时,如果想在网页上显示文章的浏览量,除了免插件实现文章浏览数之外,就是安装一个wordpress浏览量插件WP-PostViews。这个插件
  • 软件介绍说起远程桌面连接,大家特别先想到的就是QQ远程。但 QQ远程受网络的影响很大,经常出现无法远程连接或者中途卡住的问题。比QQ远程功能强大1
  • 微信小程序可滚动视图区域scroll-view组件是定义微信小程序的一个固定显示区域,这个区域里的内容可以滚动显示。需要给scroll-view设置一个固定的
  • 微信小程序Video视频组件是用于微信小程序中插入视频的组件。网络视频地址:[cce_html]http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload
  • 微信小程序滚动选择器picker组件的作用是制作出微信小程序中底部弹起的滚动选择器。滚动选择器分为以下几种:(使用时,使用mode属性来确定)
  • CSS网页布局中字体样式 图文教程 (111954 次浏览)
    在网页制作时,我们需要控制网页中字体的大小,颜色,粗细等,通过情况下,我们会使用以下的CSS样式去控制这个字体的样式:字体的大小:font-size
  • 问:老师,我在divcss制作一个网页布局时div总是跑出来,怎么解决,代码如下:[cce]<div id="zhongjian"><div class="chebian"&
  • Flex布局制作菜单导航 图文教程 (1199 次浏览)
    制作菜单导航要求是每行5个栏目,总共二行,这就需要使用Flex布局制作菜单导航。课程中使用的属性: font-size:字体大小 margin:外边距