UNIAPP实战项目笔记3 Swiper部分开发

推荐:

1. 顶部滑动导航
2. swiper
   • 名称: IndexSwiper
   • 封装: 是

swiper的坑:

1. 组件名称为swiper.vue或者 Swiper.vue, 在传递数据的时候有可能图片就不见了
2. 改变图片的大小,最好用rpx为单位,兼容性好一些
3. 本身swiper是有150px的默认高度,app中需要给吧默认高度的时候加入:

       swiper{
           width:100%;
           height:400rpx;
       }
   

• 新建一个组件 indexSwiper.vue 在components目录下

      <template>
          <view class="swiperview">
              <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                  <swiper-item>
                      <view class="swiper-item">
                          <image class="swiper-img" src="/static/img/b3.jpg" mode=""></image>
                      </view>
                  </swiper-item>
                  <swiper-item>
                      <view class="swiper-item">
                          <image class="swiper-img" src="/static/img/b3.jpg" mode=""></image>
                      </view>
                  </swiper-item>
                  <swiper-item>
                      <view class="swiper-item">
                          <image class="swiper-img" src="/static/img/b3.jpg" mode=""></image>
                      </view>
                  </swiper-item>
              </swiper>
          </view>
      </template>
  
      <script>
      </script>
  
      <style lang="scss">
  
      /* 清楚swiper默认高度 */
      swiper{
          width: 750rpx;
          height: 450rpx;
      }
      .swiper-img{
          width: 100%;
      }
      </style>
  

• 在index.vue中使用组件:
  使用组件分两步先引用在注册

      <template>
          <view class="content">
              <view class="index">
                  <IndexSwiper></IndexSwiper>
              </view>
              <view class="f-active-color">
                  文字
              </view>
              <view class="iconfont icon-xiaoxi"></view>
              <view class="text-area">
                  <text class="title">{{title}}</text>
              </view>
          </view>
      </template>
  
      <script>
          import IndexSwiper from '@/components/indexSwiper.vue';//引入
          export default {
              data() {
                  return {
                      title: 'Hello'
                  }
              },
              components:{
                  IndexSwiper //注册
                  
              },
              onLoad() {
  
              },
              methods: {
  
              }
          }
      </script>
  
  

img