目录
1.1 user-select:文本是否可选,用于长按选择文本
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;
}