uni-app 添加锚点和监听滚动切换tab

添加锚点

// :scroll-into-view="scrollViewId"
//  :id="item.dot"
//  :data-id="`id${item.value}`"
//  @tap="onSelectDate($event, item)"

<view class="select_month" :data-id="`id${item.value}`" :class="{active_month: item.value === month}" v-for="item in dateList" :key="item.value" @tap="onSelectDate($event, item)">{{item.name}}</view>

<scroll-view :scroll-into-view="scrollViewId" scroll-y="true" scroll-with-animation="true" @scroll="onScroll">
   <view :id="item.dot" v-for="item in list" :key="item.id">
      <detail :item="item"></detail>
   </view>
</scroll-view>

监听滚动

scroll-view 标签添加@scroll事件

示例

<template>
    <view class="detail_container">
        <view class="detail_date_box">
            <view class="detail_date" @click="onToggle">
                <view class="detail_date_active">{{date}}</view>
                <image class="detail_date_more" :class="{open_select: isShow}" src="../../static/more3.png"></image>
            </view>
            
            <view v-show="isShow" class="detail_date_select">
                <view class="triggle">这是一个小箭头</view>
                <view class="select_top">
                    <image class="select_left" src="../../static/dbarrow.png" @click="year--"></image>
                    <view class="select_year">{{year}}年</view>
                    <image class="select_right" src="../../static/dbarrow.png" @click="year++"></image>
                </view>
                <view class="select_content">
                    <view class="select_month" :data-id="`id${item.value}`" :class="{active_month: item.value === month}" v-for="item in dateList" :key="item.value" @tap="onSelectDate($event, item)">{{item.name}}</view>
                </view>
            </view>
        </view>
        
        <scroll-view :scroll-into-view="scrollViewId" scroll-y="true" scroll-with-animation="true" @scroll="onScroll">
            <view :id="item.dot" v-for="item in list" :key="item.id">
                <detail :item="item"></detail>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    import detail from '../../component/detail.vue'
    export default{
        components: { detail },
        data() {
            return {
                query: null,
                scrollViewId: '',
                isShow: false,
                date: '2020.11',
                year: '2020',
                month: '11',
                monthObj: {},
                arr: [12,11,10,9,8,7,6,5,4,3,2,1],
                dateList: [
                    {
                        name: '一月',
                        value: 1,
                        num: 0
                    },
                    {
                        name: '二月',
                        value: 2,
                        num: 0
                    },
                    {
                        name: '三月',
                        value: 3,
                        num: 0
                    },
                    {
                        name: '四月',
                        value: 4,
                        num: 0
                    },
                    {
                        name: '五月',
                        value: 5,
                        num: 0
                    },
                    {
                        name: '六月',
                        value: 6,
                        num: 0
                    },
                    {
                        name: '七月',
                        value: 7,
                        num: 0
                    },
                    {
                        name: '八月',
                        value: 8,
                        num: 0
                    },
                    {
                        name: '九月',
                        value: 9,
                        num: 0
                    },
                    {
                        name: '十月',
                        value: 10,
                        num: 0
                    },
                    {
                        name: '十一月',
                        value: 11,
                        num: 0
                    },
                    {
                        name: '十二月',
                        value: 12,
                        num: 0
                    },
                ],
                list: [
                    {
                        id: 1,
                        dot: 'id11',
                        month: 11,
                        status: 1,
                        title: '您推广的XX客户已完成购买',
                        date: '2020/11/12 09:52',
                        money: '-1000.03',
                        unit: 'UAD'
                    },
                    {
                        id: 2,
                        month: 11,
                        dot: '11_2',
                        status: 2,
                        title: '您推广的XX客户已退款',
                        date: '2020/11/12 09:52',
                        money: '10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 3,
                        month: 11,
                        dot: '11_3',
                        status: 3,
                        title: '您推广的XX客户已完成购买',
                        date: '2020/11/12 09:52',
                        money: '10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 4,
                        month: 11,
                        dot: '11_4',
                        status: 4,
                        title: '10月提成确认',
                        date: '2020/11/12 09:52',
                        money: '-10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 5,
                        month: 11,
                        dot: '11_5',
                        status: 1,
                        title: '您推广的XX客户已完成购买',
                        date: '2020/11/12 09:52',
                        money: '-1000.03',
                        unit: 'UAD'
                    },
                    {
                        id: 6,
                        month: 11,
                        dot: '11_6',
                        status: 2,
                        title: '您推广的XX客户已退款',
                        date: '2020/11/12 09:52',
                        money: '10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 7,
                        month: 11,
                        dot: '11_7',
                        status: 3,
                        title: '您推广的XX客户已完成购买',
                        date: '2020/11/12 09:52',
                        money: '10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 8,
                        month: 10,
                        dot: 'id10',
                        status: 4,
                        title: '10月提成确认',
                        date: '2020/10/12 09:52',
                        money: '-10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 9,
                        month: 10,
                        dot: '10_1',
                        status: 1,
                        title: '您推广的XX客户已完成购买',
                        date: '2020/10/12 09:52',
                        money: '-1000.03',
                        unit: 'UAD'
                    },
                    {
                        id: 10,
                        month: 10,
                        dot: '10_2',
                        status: 2,
                        title: '您推广的XX客户已退款',
                        date: '2020/10/12 09:52',
                        money: '10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 11,
                        month: 10,
                        dot: '10_3',
                        status: 3,
                        title: '您推广的XX客户已完成购买',
                        date: '2020/10/12 09:52',
                        money: '10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 12,
                        month: 10,
                        dot: '10_4',
                        status: 4,
                        title: '10月提成确认',
                        date: '2020/10/12 09:52',
                        money: '-10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 13,
                        month: 10,
                        dot: '10_5',
                        status: 1,
                        title: '您推广的XX客户已完成购买',
                        date: '2020/10/12 09:52',
                        money: '-1000.03',
                        unit: 'UAD'
                    },
                    {
                        id: 14,
                        month: 9,
                        dot: 'id9',
                        status: 2,
                        title: '您推广的XX客户已退款',
                        date: '2020/09/12 09:52',
                        money: '10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 15,
                        month: 9,
                        dot: '9_2',
                        status: 3,
                        title: '您推广的XX客户已完成购买',
                        date: '2020/09/12 09:52',
                        money: '10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 16,
                        month: 9,
                        dot: '9_3',
                        status: 4,
                        title: '10月提成确认',
                        date: '2020/09/12 09:52',
                        money: '-10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 17,
                        month: 9,
                        dot: '9_4',
                        status: 3,
                        title: '您推广的XX客户已完成购买',
                        date: '2020/09/12 09:52',
                        money: '10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 18,
                        month: 9,
                        dot: '9_5',
                        status: 4,
                        title: '10月提成确认',
                        date: '2020/09/12 09:52',
                        money: '-10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 19,
                        month: 9,
                        dot: '9_6',
                        status: 3,
                        title: '您推广的XX客户已完成购买',
                        date: '2020/09/12 09:52',
                        money: '10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 20,
                        month: 9,
                        dot: '9_7',
                        status: 4,
                        title: '10月提成确认',
                        date: '2020/09/12 09:52',
                        money: '-10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 21,
                        month: 9,
                        dot: '9_8',
                        status: 3,
                        title: '您推广的XX客户已完成购买',
                        date: '2020/09/12 09:52',
                        money: '10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 22,
                        month: 9,
                        dot: '9_9',
                        status: 4,
                        title: '10月提成确认',
                        date: '2020/09/12 09:52',
                        money: '-10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 23,
                        month: 9,
                        dot: '9_10',
                        status: 4,
                        title: '10月提成确认',
                        date: '2020/09/12 09:52',
                        money: '-10000.03',
                        unit: 'UAD',
                    },
                    {
                        id: 24,
                        month: 9,
                        dot: '9_11',
                        status: 4,
                        title: '10月提成确认',
                        date: '2020/09/12 09:52',
                        money: '-10000.03',
                        unit: 'UAD',
                    }
                ]
            }
        },
        mounted() {
            this.list.forEach((item, index) => {
                this.monthObj[item.month] = (this.monthObj[item.month] || 0) + 71
            })
            this.arr.forEach(key => {
                if (this.monthObj[key]) {
                    this.monthObj[key] = this.monthObj[key] + (this.monthObj[key + 1] || 0)
                }
            })
        },
        methods: {
            onScroll(event) {
                const deltaY = !!event.detail.deltaY   // 大于0上滑，小于0下滑
                const scrollTop = event.detail.scrollTop + 5
                const arr = Object.keys(this.monthObj)
                for (let i = 0; i < this.arr.length; i++) {
                    let id = ''
                    if (this.monthObj[this.arr[i]] && this.monthObj[this.arr[i]] <= scrollTop && this.monthObj[this.arr[i+1]] > scrollTop) {
                        id = this.arr[i] - 1
                    }
                    if (deltaY && this.monthObj[this.arr[i]] >= scrollTop && this.monthObj[this.arr[i+1]] >= scrollTop) {
                        id = this.arr[i]
                    }
                    if (id) {
                        this.month = id
                        this.date = `${this.year}.${id < 10 ? '0'+id : id}`
                        break
                    }
                }
            },
            onViewDetailList() {
                // uni.navigateTo({
                //  url: '../confirmSheet/index'
                // })
            },
            onToggle() {
                this.isShow = !this.isShow
            },
            onSelectDate(event, item) {
                this.month = item.value
                const month = this.month < 10 ? `0${this.month}` : this.month
                this.date = `${this.year}.${month}`
                this.isShow = false
                this.scrollViewId = event.currentTarget.dataset.id
            }
        }
    }
</script>

<style scoped>
    scroll-view{
        height: calc(100vh - 100rpx);
    }
    .detail_container{
        padding: 100rpx 40rpx 40rpx 40rpx;
    }
    .detail_date_box{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        padding: 10px 20px;
        background-color: #fff;
        z-index: 40;
    }
    .detail_date{
        display: flex;
        width: 194rpx;
        height: 56rpx;
        line-height: 56rpx;
        text-align: center;
        color: #222222;
        font-size: 26rpx;
        border-radius: 28rpx;
        border: 2rpx solid #979797;
    }
    .detail_date_active{
        width: 150rpx;
    }
    .detail_date_more{
        width: 28rpx;
        height: 14rpx;
        vertical-align: middle;
        margin: 22rpx 0 0 0;
    }
    .open_select{
        transform: rotateZ(180deg);
    }
    .detail_date_select{
        position: absolute;
        left: 0;
        top: 76rpx;
        width: 400rpx;
        padding: 0 20rpx 20rpx 20rpx;
        background: #FFFFFF;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.13);
        border: 1px solid #EEEEEF;
    }
    .triggle{
        position: absolute;
        width: 14rpx;
        height: 14rpx;
        transform: rotate(45deg);
        background-color: #fff;
        z-index: 30;
        top: -5px;
        left: 25%;
        margin-left: -7rpx;
        color: #fff;
        overflow: hidden;
        border-left: 2rpx solid #EEEEEF;
        border-top: 2rpx solid #EEEEEF;
    }
    .select_top{
        display: flex;
        padding: 20rpx 0;
        height: 30rpx;
        line-height: 30rpx;
        font-size: 30rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #222222;
        border-bottom: 2rpx solid #EEEEEF;
    }
    .select_left,
    .select_right{
        width: 28rpx;
        height: 24rpx;
        margin: 4rpx 0 0 0;
    }
    .select_left{
        transform: rotateY(180deg);
    }
    .select_year{
        flex: 1;
        text-align: center;
    }
    .select_content{
        display: flex;
        flex-wrap: wrap;
    }
    .select_month{
        width: 25%;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #222222;
        line-height: 80rpx;
        text-align: center;
    }
    .active_month{
        color: #FC753B;
    }
    
</style>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 157,198评论 4赞 359
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,663评论 1赞 290
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 106,985评论 0赞 237
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,673评论 0赞 202
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 51,994评论 3赞 285
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,399评论 1赞 211
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,717评论 2赞 310
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,407评论 0赞 194
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,112评论 1赞 239
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2赞 241
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1赞 256
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,255评论 2赞 250
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,881评论 3赞 233
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0赞 192
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2赞 269
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2赞 260

推荐阅读更多精彩内容

  • tab切换滚动监听
    做需求是有多个页面需要切换tab滑动，滑动监听切换tab，在这记录下提取的滚动监听的方法和应用，方法提取后放在工具...
    李振亚_cb74阅读 1,051评论 0赞 0
  • uni-app使用Vue.js
    说明 ：uni-app基于Vue 2.0实现，开发者需注意Vue 1.0 -> 2.0 的使用差异，详见从 Vue...
    瑟闻风倾阅读 29,320评论 0赞 8
  • Uni-app 学习笔记
    uni-app跨平台框架官方教程 链接：https://ke.qq.com/course/343370 一、框架简...
    Neyo_凉阅读 35,892评论 0赞 43
  • React如何实现锚点滚动
    解决方案描述 实现锚点滚动, 不要用 标签, 因为会触发路由跳转 可以使用H5提供的API scrollToAnc...
    Oo晨晨oO阅读 15,270评论 4赞 10
  • 家长会谈合作
    久违的晴天，家长会。 家长大会开好到教室时，离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,395评论 16赞 21