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

Love The Way You Lie 2024-04-06 12:47 94阅读 0赞

#### 推荐: ####

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  
![Swiper部分 预览图][Swiper_]

[Swiper_]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/71ec3bbaa2fb4ac292e55d77e5135847.png