微信小程序开发系列（九）· 小程序界面如何进行文本选中、如何显示全部空格、如何将图片显示改为圆角

目录

1.  绘制公司区域信息

1.1  user-select：文本是否可选，用于长按选择文本

1.2  space：显示连续空格

1.3  实战演示

---

1.  绘制公司区域信息

在小程序中，如果需要渲染文本，需要使用 text 组件，常用的属性有 2个：

①  user-select：文本是否可选，用于长按选择文本

②  space：显示连续空格

注意事项：

1.除了文本节点以外的其他节点都无法长按选中

2. text 组件内只支持 text 嵌套

1.1  user-select：文本是否可选，用于长按选择文本

代码示例：

<!-- user-select：长按以后选中文本 -->
<text user-select>情人节</text>

1.2  space：显示连续空格

        若是不添加space会发现空格只显示一个，如下图：

space有三个可选属性值：

①  ensp：以中文字符空格一半大小进行展示

代码如下：

<!-- user-select：长按以后选中文本 -->
<text user-select space="ensp">情     人节</text>

②  emsp：以中文字符的空格大小进行展示的

代码如下：

<!-- user-select：长按以后选中文本 -->
<text user-select space="emsp">情     人节</text>

③  nbsp：以字符大小进行展示

代码如下：

<!-- user-select：长按以后选中文本 -->
<text user-select space="nbsp">情     人节</text>

1.3  实战演示

        先找到index.wxml中的布局如下图：

        将代码更改为图示代码，也可复制如下：

<!-- 公司信息 -->
<view class="info">
  <text>同城配送</text>
  <text>行业龙头</text>
  <text>半小时送达</text>
  <text>100%好评</text>
</view>

        全部代码，注意考虑到图片路径：

<!-- view 小程序提供的容器组件，可以当成div使用-->

<!-- 轮播图区域 -->
<view class="swiper">
  <!-- swiper：滑块视图容器，其中只能放置 swiper-item 组件 -->
  <!-- autoplay实现轮播图的自动切换 -->
  <!-- interval切换时间 -->
  <!-- indicator-dots下方小圆点 -->
  <!-- circular循环 -->
  <!-- indicator-color小圆点颜色 -->
  <!-- indicator-active-color激活小圆点颜色 -->
  <swiper 
    autoplay 
    interval="2000" 
    indicator-dots 
    circular
    indicator-color="#fff"
    indicator-active-color="#f3514f"
  >
    <!-- swiper-item： 只可放置在 swiper 组件中，宽高自动设置为100%，代表swiper 中的每一项 -->
    <swiper-item>
      <image 
      src="../../picture/traffic/banner-1.jpg" 
      mode="" 
      /> 
    </swiper-item>
    <swiper-item>
      <image 
      src="../../picture/traffic/banner-2.jpg" 
      mode="" 
      /> 
    </swiper-item>
    <swiper-item>
      <image 
      src="../../picture/traffic/banner-3.jpg" 
      mode="" 
      />   
    </swiper-item>
  </swiper>
</view>

<!-- 公司信息 -->
<view class="info">
  <text>同城配送</text>
  <text>行业龙头</text>
  <text>半小时送达</text>
  <text>100%好评</text>
</view>

<!-- 商品导航 -->
<view class="good-nav"></view>

<!-- 推荐商品 -->
<view class="good-hot"></view>

<!-- src:图片的资源地址-->
<!-- mode:图片的裁剪和缩放模式-->
<!-- show-menu-by-longpress：长安展示菜单-->
<!-- <image 
  src="../../picture/traffic/1.png" 
  mode="aspectFit" 
  show-menu-by-longpress
  lazy-load
  /> -->

<!-- user-select：长按以后选中文本
<text user-select space="nbsp">情     人节</text> -->

        找到.scss文件，在文件的最下方添加如下代码：

.info{
  display:flex;
  // 四个组件的布局方式
  justify-content: space-between;
  background-color: #fff;
  padding: 16rpx;
}

        完成后的效果如下图： 

其中display 属性的不同取值。下面我简要介绍一下它们的作用：

①  display: block;将元素显示为块级元素，即元素会独占一行，并且可以设置宽度、高度以及上下外边距。

②  display: inline;将元素显示为内联元素，即元素不会独占一行，只会占据自身内容所需的空间，不可设置宽度和高度。

③  display: inline-block;结合了块级元素和内联元素的特性，元素会在一行内显示，并且可以设置宽度、高度以及上下外边距。

④  display: flex;使用 Flexbox 布局，将元素显示为弹性盒子，可以方便地进行灵活的布局。

⑤  display: inline-flex;类似于 display: flex;，但是以内联元素的方式显示弹性盒子。

⑥  display: grid;使用 Grid 布局，将元素显示为网格容器，可以实现复杂的布局结构。

⑦  display: inline-grid;类似于 display: grid;，但以内联元素的方式显示网格容器。

⑧  display: flow-root;创建一个新的 BFC（块级格式化上下文），用于解决元素浮动引起的布局问题，元素内部的浮动元素不会影响到父元素的高度。

        上划找到page，将其内容修改为：

page{
  height: 100vh;
  background-color: #efefef !important;
  
  // 四周也有间隔
  padding: 16rpx;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  // 与上一个的间隔
  >view{
    &:nth-child(n+2)
    {
      margin-top: 16rpx;
    }
  }
}

作用如下：

        将图片显示改为圆角：

更改完完整代码：

page{
  height: 100vh;
  background-color: #efefef !important;

  // 四周也有间隔
  padding: 16rpx;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  // 与上一个的间隔
  >view{
    &:nth-child(n+2)
    {
      margin-top: 16rpx;
    }
  }
}

//轮播图区域的样式
.swiper{
  border-radius: 10rpx;
  overflow: hidden;

  swiper{
    height: 360rpx;
    // background-color: skyblue;

    swiper-item{
      image{
        width: 100%;
        height: 100%;

        border-radius: 10rpx;
      }


      //&在Sass中代表的是父选择器，引用的意思
      //swiper-item:first-child
      // &:first-child{
      //   background-color: lightsalmon;
      // }
      // &:first-child{
      //   background-color: lightseagreen;
      // }
    }
  }
}

.info{
  display:flex;
  // 四个组件的布局方式
  justify-content: space-between;
  background-color: #fff;
  padding: 16rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
}

微信小程序开发_时光の尘的博客-CSDN博客