1.uniapp基础组件

滑动组件 scroll-view

<template>
  <view class="out">
    <!-- scroll-x 允许盒子在行上滑动 不加这个属性的盒子长出去的部分就被隐藏了，而且不能滑动 -->
    <!-- scroll-x 和scroll-y可以同时加，就能上下左右滑动了 -->
    <scroll-view scroll-x class="scroll">
      <view class="group">
        <view class="item">
          111
        </view>
        
        <view class="item">
          111
        </view>
        <view class="item">
          111
        </view>
        <view class="item">
          111
        </view>
        <view class="item">
          111
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    }
  }
</script>

<style lang="scss">
  .scroll {
    // 加边框
    border: 1px solid red;
    // 使边框占满屏幕
    box-sizing: border-box;
    height: 220rpx;
    .group {
      // 使元素在一行显示,多余的部分不显示
      white-space: nowrap;
      .item {
        width: 220rpx;
        height: 220rpx;
        background: royalblue;
        // 使元素在一行显示,但是会把元素挤掉下去
        // 给父级一个white-space: nowrap;,使他在一行显示
        display: inline-block;
        margin-right: 10rpx;
      }
    }
  }
</style>

轮播图 左右滑动组件 swiper

swiper组件会自动播放，上一个组件是手动划到哪里就固定在哪里，这个是自动滑动，且占满全屏 轮播图组件也可以手动滑动

组件属性值是布尔值的不需要写true和false也行，有属性名就表示true了

duration是滑动动画时长

interval是自动切换时间间隔，就是每张图显示多长时间

indicator-dots是否显示下面的三个小点

src地址可以是静态文件夹，也可以是网络地址，把图片的url复制到src中即可显示

    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
      <swiper-item>
        <view class="swiper-item">
          <img src="/static/images/jd_banner1.jpg" alt="">
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item">
        <img src="/static/images/jd_banner2.jpg" alt="">
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item">
          <img src="/static/images/jd_banner3.jpg" alt="">
        </view>
      </swiper-item>
    </swiper>

现在有一个问题，右边每一幅图都少了一截，原因是组件有默认宽高，而图片有自己的宽高

可以给图片组件一个类名，然后通过css设定固定的宽高，使图片和组件的宽高一致，这样原图会少一截，也可以给固定宽度或高度，另一边就不给值，但是又会有空白