zoukankan      html  css  js  c++  java
  • uniApp之 顶部选项卡

    想做一个像uniapp插件里资讯应用模板那样的功能,用了官方组件swiper,一开始不能滚动,后来看了官网,说要加scroll-view 这个标签才可以

    第一次用uniapp做app做个笔记吧

    首先先做个顶部的tab选项卡,因为我只有两项 所以就直接写在view标签里了

    <view class="navs">
                <view :class="{ active: current == i }" v-for="(item, i) in navs" @click="navsHandleClick(i)">{{ item.lable }}</view>
    </view>

    接着写底下的内容,点击和滑动都可以切换tab,并且加上选中样式

    :current="current" 属性一定要加上
    <view class="uni-tab-bar">
                <swiper class="swiper-box" @change="intervalChange" :current="current">
                    <swiper-item>
                    <scroll-view scroll-y class="list" >
                        <view style="height: 2000px;">1</view>
                    </scroll-view>
                    <scroll-view scroll-y class="list" >
                        <view style="height: 2000px;">2</view>
                    </scroll-view>
                    </swiper-item>
                </swiper>
            </view>

    在app.vue里 引入uni.css

    @import './common/uni.css';

    js

    methods: {
            navsHandleClick(i) {
                console.log(i);
                this.current = i;
            },
            intervalChange(e) {
                this.current = e.detail.current;
            }
        }
  • 相关阅读:
    001 分布式系统
    024 RabbitTemplate组件
    023 RabbitAdmin组件
    022 spring与Rabbitmq整合
    011 mandatory参数
    这样自己组装数据,醉了,
    cool,
    swift,
    page enable,
    构建 HTTPserver,
  • 原文地址:https://www.cnblogs.com/zfdbk/p/12582058.html
Copyright © 2011-2022 走看看