uniapp常用小案例收集：

轮播图、选项卡、新闻栏目、登录界面、个人列表

<template>
    <view class="content">
        <!-- 轮播图 -->
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" circular :duration="1000">
            <swiper-item class="swiper-item" v-for="(item,index) in swiperList" :key="index">
                <image :src="item.imgUrl" mode=""></image>
            </swiper-item>
        </swiper>
        <!-- 标题区域 -->
        <view class="title-zone" style="width: 750upx;height: 300upx;background-color: #eee;margin-top: 10upx;display: flex;align-items: center;">
            <view class="" style="margin-left: 10upx;width: 200upx;height: 200upx;background-color: #ccc;border-radius: 50%;">
                <!-- <text style="color: white;font-size: 50upx;line-height: 200upx;display: inline-block;margin-left: 55upx;">A-3</text> -->
                <image src="../../static/logo.png" style="width: 100%;height: 100%;border-radius: 50%;" mode=""></image>
            </view>
            <view class="" style="display: flex;flex-direction: column;padding-left: 40upx;">
                <text style="font-weight: bolder;">A-3 TITLE</text>
                <text style="padding-top: 10upx;font-size: 20upx;color: #C8C7CC;">A-3</text>
            </view>
        </view>
        <!-- tab选项卡 -->
        <scroll-view style="white-space: nowrap;background-color: #EED8AE;" scroll-x="true">
            <view style="display: flex;width: 120upx;height: 80upx;text-align: center;line-height: 80upx;display: inline-block;margin-left: 10upx;"
             v-for="(item,index) in scrollList" :key="index" @tap="handleSelected(index)" :class="{'on':item.selected}">
                {{item.title}}
            </view>
        </scroll-view>
        <view style="margin-top: 10upx;"></view>
        <!-- 用户界面 -->
        <view class="" style="width: 600upx;margin: 0 auto;">
            <form action="" @submit="formSubmit">
                <h2 style="text-align: center;border-bottom: 1upx solid #eee;padding-bottom: 40upx;">用户登录</h2>
                <table style="">
                    <tr>
                        <td><input type="text" placeholder="请输如用户名" style="width: 590upx;height: 80upx;border: 1upx solid #ccc;margin-top: 60upx;" name="userName" id=""></td>  
                    </tr>
                    <tr>
                        
                        <td><input password="" type="text" placeholder="请输如密码" style="width: 590upx;height: 80upx;border: 1upx solid #ccc;margin-top: 40upx;" name="password" id=""></td>
                    </tr>
                </table>
                <button style="margin-top: 20upx;" type="primary" form-type="submit">登录</button>
            </form>
        </view>
        <view style="margin-top: 80upx;border-bottom: #eee 1upx solid;"></view>
        <!-- 列表卡 -->
        <view class="container">
            <view class="item" v-for="(item,index) in itemList" :key="index">
                <view style="display: flex;">
                    <image :src="item.icon" mode=""></image>
                    <view style="padding-left: 20upx;">{{item.title}}</view>
                </view>
                <view class="">
                    <image :src="item.arrow" mode=""></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                scrollList: [{
                        title: '财经',
                        selected: true
                    },
                    {
                        title: '体育',
                        selected: false
                    },
                    {
                        title: '影视',
                        selected: false
                    },
                    {
                        title: '科技',
                        selected: false
                    },
                    {
                        title: '社会',
                        selected: false
                    },
                    {
                        title: '军事',
                        selected: false
                    },
                    {
                        title: '教育',
                        selected: false
                    },
                    {
                        title: '汽车',
                        selected: false
                    },
                    {
                        title: '社会',
                        selected: false
                    }
                ],
                swiperList: [{
                        imgUrl: '../../static/swiper1.jpg'
                    },
                    {
                        imgUrl: '../../static/swiper2.jpg'
                    },
                    {
                        imgUrl: '../../static/swiper3.jpg'
                    },
                    {
                        imgUrl: '../../static/swiper4.jpg'
                    },
                    {
                        imgUrl: '../../static/swiper5.jpg'
                    }
                ],
                itemList:[
                    {
                        icon:'../../static/itemIcon/payment.png',
                        title:'支付',
                        arrow:'../../static/itemIcon/arrow.png'
                    },
                    {
                        icon:'../../static/itemIcon/save.png',
                        title:'收藏',
                        arrow:'../../static/itemIcon/arrow.png'
                    },
                    {
                        icon:'../../static/itemIcon/friendCircle.png',
                        title:'朋友圈',
                        arrow:'../../static/itemIcon/arrow.png'
                    },
                    {
                        icon:'../../static/itemIcon/wallet.png',
                        title:'卡包',
                        arrow:'../../static/itemIcon/arrow.png'
                    },
                    {
                        icon:'../../static/itemIcon/emotion.png',
                        title:'表情',
                        arrow:'../../static/itemIcon/arrow.png'
                    },
                    {
                        icon:'../../static/itemIcon/reset.png',
                        title:'设置',
                        arrow:'../../static/itemIcon/arrow.png'
                    }
                ]
            }
        },
        onLoad() {

        },
        methods: {
            handleSelected(index) {
                console.log(index)
                this.scrollList[index].selected = true
                for (let i = 0; i < this.scrollList.length; i++) {
                    if (i != index) {
                        this.scrollList[i].selected = false
                    }
                }
            },
            formSubmit(e){
                // console.log(e)
                console.log('账号是：',e.detail.value.userName)
                console.log('密码是：',e.detail.value.password)
            }
        }
    }
</script>

<style lang="scss">
    .content {
        height: 100vh;
    }

    .swiper-item {
        width: 750upx;
        border-radius: 25upx;
        padding-left: 6upx;
    }

    .swiper-item image {
        height: 100%;
        width: 100%;
        border-radius: 25upx;
    }

    .on {   
        color: white;
        border: 1upx solid #4CD964;
        background-color: #4CD964;
        border-radius: 40upx;
        font-weight: bolder;
    }
    .container {
        width: 650upx;
        margin: 0 auto;
        .item {
            height: 120upx;
            // border: 1upx solid red;
            display: flex;
            align-items: center;
            border-bottom: 1upx solid #eee;
            justify-content: space-between;
            image{
                width: 50upx;
                height: 50upx;
            }
        }
    }

</style>