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