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;
            }
        }
  • 相关阅读:
    CentOS 网络配置
    BUUCTF-PWN爬坑-04-pwn1_sctf_2016
    BUUCTF-PWN爬坑-03-warmup_csaw_2016
    BUUCTF-PWN爬坑-02-rip
    此博客早八百年已停止维护
    重&长剖
    FHQ Treap
    NOIP2020游记
    CSP2020 游记
    线段树套平衡树
  • 原文地址:https://www.cnblogs.com/zfdbk/p/12582058.html
Copyright © 2011-2022 走看看