当前位置：首页 > news >正文

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

news 来源：原创 2024/4/28 3:11:58

swiper的坑:

组件名称为swiper.vue或者 Swiper.vue, 在传递数据的时候有可能图片就不见了
改变图片的大小,最好用rpx为单位,兼容性好一些

本身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>