uni-app学习记录04-轮播图和滑屏图片

<template>
    <view>
        <!-- 轮播图视图 swiper-item是每页的元素 -->
        <swiper :indicator-dots="true" :autoplay="true" :interval="1500" :duration="1000" @change="test" circular="true">
            <swiper-item>
                <view class="box5">
                    <image src="../../static/shuijiao.jpg" mode=""></image>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="box5">
                    <image src="../../static/shuijiao.jpg" mode=""></image>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="box5">
                    <image src="../../static/shuijiao.jpg" mode=""></image>
                </view>
            </swiper-item>
        </swiper>
        <!-- 横向画图 :scroll-x开启x轴发滚动 white-space: nowrap不换行去显示 -->
        <scroll-view :scroll-x="true" style="white-space: nowrap;">
            <view class="box1">A</view>
            <view class="box2">B</view>
            <view class="box3">C</view>
        </scroll-view>
        <view class="id">
            <view class="left">
                <view v-for="(item,index) in list" :key="index" @click="qiehuan(index)">
                    {{item.title}}
                </view>
            </view>
            <view class="rigth">
                <!-- :scroll-into-view可以设置让子菜单滚动 -->
                <scroll-view :scroll-y="true" class="box4" style="height: 200px;" :scroll-into-view="aid">
                    <view v-for="(item,index) in list" :key="index" :id="'po'+ index" >
                        {{item.title}}
                        <view v-for="(it,idx) in item.list" :key="idx">
                            {{it}}
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                list:[
                    {title:"华为",list:["华为1","华为2","华为3","华为4","华为5","华为6","华为7"]},
                    {title:"小米",list:["小米1","小米2","小米3","小米4","小米5","小米6","小米7"]},
                    {title:"苹果",list:["苹果1","苹果2","苹果3","苹果4","苹果5","苹果6","苹果7"]},
                    {title:"魅族",list:["魅族1","魅族2","魅族3","魅族4","魅族5","魅族6","魅族7"]},
                    {title:"三星",list:["三星1","三星2","三星3","三星4","三星5","三星6","三星7"]}
                ],
                aid:""
            }
        },
        methods: {
            test(e) {
                // console.log(e.detail.current)
            },
            qiehuan(index){
                this.aid = 'po'+index
                console.log('po'+index)
            }
        }
    }
</script>
 
<style lang="scss">
    swiper{
        height: 240px;
    }
    .box1 {
        display: inline-block;
        width: 200px;
        height: 100px;
        background: #007AFF;
        border: 1px solid red;
    }
 
    .box2 {
        display: inline-block;
        width: 200px;
        height: 100px;
        background: #f0f0f0;
        border: 1px solid red;
    }
 
    .box3 {
        display: inline-block;
        width: 200px;
        height: 100px;
        background: #00ff00;
        border: 1px solid red;
    }
    .box5{
        text-align: center;
        width:100%;
        height:100%;
    }
    .box4 {
        white-space: nowrap;
    }
    .id{
        display: flex;
        .left{
            width:100px;
            border:1px solid red;
        }
        .rigth{
            flex: 1;
        }
    }
 
</style>