微信小程序-样式和组件（2）image / text

一.image组件

image组件用来显示小程序的图片。
一共有四个属性：
scr：图片的资源地址
mode：图片的剪裁和缩放模式
show-menu-by-longpress：长按展示菜单，菜单中有转发给好友，收藏，保存等
lazy-load:懒加载，在滑动到一定的距离（上下三屏）以后展示图片
可通过swiper组件和image组件结合实现图片轮播的效果

<swiper-item>
<image src="../../assets/s1.png"/>
</swiper-item>
<swiper-item>
  <image src="../../assets/s2.png"/>
</swiper-item>
<swiper-item>
  <image src="../../assets/s3.png"/>
</swiper-item>

2.text组件

微信小程序中text组件主要实现文本渲染功能
两个属性：
user-selected：文本选中功能，只有text组件可以实现
space：实现文本之间空格的功能，有三个参考值如下：

ensp：中文字符一半大小
emsp：中文字符大小
nbsp：一个字符大小

可以和图片一起使用放在图片下面介绍图片信息

<view class="nav">
  <view>
    <image src="../../assets/nav1.png" />
    <text>鲜花玫瑰</text>
  </view>
  <view>
    <image src="../../assets/nav1.png" />
    <text>鲜花玫瑰</text>
  </view>
  <view>
    <image src="../../assets/nav1.png" />
    <text>鲜花玫瑰</text>
  </view>
  <view>
    <image src="../../assets/nav1.png" />
    <text>鲜花玫瑰</text>
  </view>
  <view>
    <image src="../../assets/nav1.png" />
    <text>鲜花玫瑰</text>
  </view>
</view>

使用类选择器，对图片和文本进行渲染
display:flex 可以是文本铺平显示
justify-content：space-between每个view间空格隔开

.nav{
  display: flex;
  justify-content: space-between;
  background-color: #efefef;
  padding: 0rpx 16rpx;
  border-radius: 10rpx;
  view{
    display: flex;
    flex-direction: column;
    align-items: center;
    image{
      width: 80rpx;
      height: 80rpx;
  
    }
    text{
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  }

}