微信小程序（2）：小程序常用布局组件

刺骨的言语ヽ痛彻心扉 2022-12-30 13:55 319阅读 0赞

文章目录

      • 一、view 视图容器
            • 1、基础使用
            • 2、hover-class、hover-start-time、hover-stay-time：指定按下去的样式类、按住后多久出现点击态、手指松开后点击态保留时间
            • 3、hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击态
      • 二、text 文本
            • 1、基础使用
            • 2、selectable：文本是否可选 (已废弃)
            • 3、user-select：文本是否可选，该属性会使文本节点显示为 inline-block
            • 4、space：显示连续空格
            • 5、decode：是否解码
      • 三、navigator 页面链接
            • 1、url：当前小程序内的跳转链接
            • 2、open-type：跳转方式

一、view 视图容器

在这里插入图片描述

1、基础使用

index.wxml文件代码：

  1. <view class="box">小程序开发</view>

index.wxss文件代码：

  1. .box{ 
  2.   width: 200px;
  3.   height: 200px;
  4.   background-color: red;
  5. }

Ctrl+S保存，结果：
在这里插入图片描述

2、hover-class、hover-start-time、hover-stay-time：指定按下去的样式类、按住后多久出现点击态、手指松开后点击态保留时间

index.wxml文件代码改为：

  1. <view class="box" hover-class="boxHover" hover-start-time="0" hover-stay-time="100">小程序开发</view>

index.wxss文件代码改为：

  1. .box{ 
  2.   width: 200px;
  3.   height: 200px;
  4.   background-color: red;
  5. }
  7. .boxHover{ 
  8.   background-color: green;
  9. }

点击时的效果：
在这里插入图片描述

3、hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击态

index.wxml文件代码改为：

  1. <view class="box" hover-class="boxHover" hover-start-time="0" hover-stay-time="100">
  2.   <view class="item" hover-class="itemHover" hover-stop-propagation>view标签嵌套</view>
  3. </view>

index.wxss文件代码改为：

  1. .box{ 
  2.   width: 200px;
  3.   height: 200px;
  4.   background-color: red;
  5. }
  7. .boxHover{ 
  8.   background-color: green;
  9. }
  11. .item{ 
  12.   width: 100px;
  13.   height: 100px;
  14.   background-color: yellow;
  15. }
  16. .itemHover{ 
  17.   background-color: hotpink;
  18. }

效果：
在这里插入图片描述
点击小黄块时：
在这里插入图片描述
点击大红块时：
在这里插入图片描述
二者互不影响。

二、text 文本

在这里插入图片描述

1、基础使用

index.wxml文件代码：

  1. <view>
  2.   <text>Web前端开发</text>
  3. </view>

效果：
在这里插入图片描述

2、selectable：文本是否可选 (已废弃)
3、user-select：文本是否可选，该属性会使文本节点显示为 inline-block

这个视频里未讲解，学待学习到了再来补充。

4、space：显示连续空格

在这里插入图片描述

  1. <view>
  2.   <text space="ensp">Web   前 端 开 发</text>
  3. </view>

在这里插入图片描述

  1. <view>
  2.   <text space="emsp">Web   前 端 开 发</text>
  3. </view>

在这里插入图片描述

  1. <view>
  2.   <text space="nbsp">Web   前 端 开 发</text>
  3. </view>

在这里插入图片描述

5、decode：是否解码
  1. <view>
  2.   <text>Web   前  端开发</text>
  3. </view>

在这里插入图片描述
如果我加上 decode：

  1. <view>
  2.   <text decode>Web   前  端开发</text>
  3. </view>

在这里插入图片描述

三、navigator 页面链接

属性很多，现列举url和open-type，后续学到再补充。

1、url：当前小程序内的跳转链接

index.wxml文件代码：

  1. <navigator url="/pages/logs/logs">跳转到logs</navigator>

logs.wxml文件代码：

  1. <navigator url="/pages/index/index">跳转到index</navigator>

效果：
在这里插入图片描述
点击后跳转：
在这里插入图片描述
再点击后跳转回去。

2、open-type：跳转方式

在这里插入图片描述
由上一节我们可以看到，左上角有个返回箭头，如果改成下述代码，返回箭头会消失（但是多了个回到首页的家的图标？）：

  1. <navigator url="/pages/logs/logs" open-type="redirect">跳转到logs</navigator>

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，319人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信小程序常用标签

    1. view 这个标签相当于div(它的特点就是在没有其他样式影响的情况下，宽度100%)； 2. text 这个标签相当于span(它的特点就是在没有其他样式影响的情况

    心已赠人心已赠人/ 0 赞/ 403 阅读

    相关 微信小程序 - 组件

    > 微信小程序为开发者提供了一系列基础组件，使开发者可以进行快速开发。同时还支持自定义组件，提升代码复用性，有助于代码维护。 一、基础组件 > 基础组件主要分为：视图容

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 715 阅读

    相关 微信小程序页面布局

    一,微信小程序页面布局方式采用的是Flex布局 1.Flex布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。 2.Flex布局提

    野性酷女野性酷女/ 0 赞/ 883 阅读