第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定

Iview 結(jié)合vuex 監(jiān)聽 Table組件滾動 返回保持之前的位置

標(biāo)簽:
Html/CSS Vue.js

为了这个问题是各种搜,最后的结果是没搜到,我写下我的解决方案吧,其实挺简单的。

webp

image.png

首先最重要的你得先找到Table组件中的table,就是这个class:ivu-table-body。然后在mounted方法中找到这个dom元素,并监听他的scroll。(created方法中拿不到dom元素),因为在created方法中dom元素还没有渲染完成。

   mounted() {            document.getElementsByClassName('ivu-table-body')[0].addEventListener('scroll', (event) => {                // console.log(event.target.scrollTop);
                console.log(event);                this.tableScroll = event.target.scrollTop;
    
            });
        },

这个event里是什么呢。请看下面


webp

image.png


然后继续往target里看,里面有很多属性,直奔最下面,


webp

image.png

那么怎么结合vuex来使用呢?

state中const state = {    transobjectData:{},//为了记录transobject页面的数据};
mutations.js中export default{
    SET_TransObjectData(state,transobjectData){
        state.transobjectData = transobjectData;
    }
}
getters.js中export default{    getTransObject:(state) => state.transobjectData,
}

vuex配置好之后,然后在路由发生变化的时候,存下数据

   beforeRouteLeave(to, from, next) {            this.$debug.log(to);            this.$debug.log(from);            if (to.path == '/transobjectsalelist') {                this.$debug.log(this.data);    
                this.$store.commit('SET_TransObjectData', {                    address: this.address,                    data: this.data,//数据
                    page: this.page,//当前第几页
                    scroll: this.tableScroll, //存储滚动
                });
            } else {                this.$store.commit('SET_TransObjectData', {});
            }            // this.$store.commit('SET_IndexScroll', position) //离开路由时把位置存起来
            next()
        },

当再次进入这个路由的时候,再created方法中搞个恢复数据的方法recoveryData

   recoveryData() { //恢复数据
                var d = this.$store.state.transobjectData;//拿到数据
                if (d.address == this.address) {                    this.$debug.log(d);                    this.data = d.data;                    this.address = d.address;                    this.page = d.page;                    this.tableScroll = d.scroll;
                    setTimeout(() => {//这里要延迟下滚动
                        document.getElementsByClassName('ivu-table-body')[0].scroll(0, d.scroll);
                    }, 400)                    return;
                }
            },

好了这就是这个问题的解决办法。

想到了之前搞过一个相似的问题,直接贴出解决办法,是页面返回到原来的位置。

离开的时候存下数据
     beforeRouteLeave(to, from, next) {            let position = window.scrollY //记录离开页面的位置
            if (position == null) position = 0
            this.$store.commit('SET_IndexScroll', position) //离开路由时把位置存起来
            next()
        },

回来的时候直接刷新。

   popScrollY() {                let indexScrollY = this.$store.state.indexScrollY                window.scroll(0, indexScrollY)
            },



作者:butterflyer
链接:https://www.jianshu.com/p/dd1007becd74


點(diǎn)擊查看更多內(nèi)容
1人點(diǎn)贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊有機(jī)會得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消