微信浏览器详情页返回列表 强行保持浏览位置并刷新(杂版)

本文介绍了一个使用Vue.js实现的无限滚动效果案例,包括如何监听滚动事件、异步加载数据、处理数据更新及页面跳转等功能,并展示了商品列表的加载与交互过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

var EventUtil = {
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler);
            } else {
                element["on" + type] = handler;
            }
        }
    };
    (function () {
        EventUtil.addHandler(window, "load", function () {
        });
        EventUtil.addHandler(window, "pageshow", function (event) {
            var vm = new Vue({
                el: '.index',
                data: {
                    flag: true,
                    goodsList: [],
                    hasWishlist: false,
                    loadWord: '加载中...',
                    showLoadBox: false,
                    showIcon: true,
                    pageIndex: 1,
                    totalPage: 0,
                    temp:[],
                    m:1
                },
                created: function () {
                },
                mounted: function () {
                    var self = this
                    this.addScroll()
                    var saveHeightLocal = sessionStorage.getItem("saveHeightLocal")
//                    console.log(saveHeightLocal)
                    if(saveHeightLocal){
                        self.pageIndex = Number(sessionStorage.getItem("pageIndexLocal"))
//                        console.log('pageIndex'+self.pageIndex)
                        self.getList2(self.m)

                    }else{
//                        console.log('other')
                        this.getList(this.pageIndex);
                    }
                },
                watch:{
                    temp:function () {
                        var self = this
                        if(self.m<self.pageIndex){
                            self.getList2(self.m)
                        }
                    }
                },
                methods: {
                    toDetail: function (itemId) {
                        var self = this
                        var scrollTopWish = $(window).scrollTop()
//                        console.log(scrollTopWish)
//                        console.log('scrollTop: '+$(window).scrollTop())
                        sessionStorage.setItem("scrollTopLocal",scrollTopWish)
                        sessionStorage.setItem("pageIndexLocal",self.pageIndex)
                        window.location.href = '$uris_mp_detail?itemId=' + itemId;
                    },
                    getList2: function (m) {
                        var datey = new Date()
                        var self = this
                        module.ajax({
                            url: '/wxmp/ajax/wishpool_rpc/list.json',
                            data: {
                                page: m,
                                pagesize:8,
                                timeNum: datey.getTime()
                            },
                            success: function (res) {
//                                console.log('ggg')
//                                console.log(self.pageIndex)
//                                console.log(m)
//                                console.log(123)
//                                console.log(res)
                                self.temp = self.temp.concat(res.rows)
                                self.totalPage = Math.ceil(res.total/res.pagesize)
                                if(self.m == self.pageIndex-1){
//                                    console.log('最后一条')
                                    if(self.totalPage>1){
                                        self.showLoadBox = true
                                        if(self.m == self.totalPage){
                                            self.showIcon = false
                                            self.loadWord = '我是有底线'
                                        }
                                    }
                                    self.goodsList = self.temp
//                                    console.log('goodsList')
//                                    console.log(self.goodsList)
//                                    console.log(Number(sessionStorage.getItem("scrollTopLocal")))
                                    sessionStorage.removeItem("saveHeightLocal")
                                    setTimeout(function () {
                                        $(window).scrollTop(Number(sessionStorage.getItem("scrollTopLocal")))
                                    },17)
                                }
                                self.m += 1
                            }
                        })
                    },
                    getList: function (n) {
                        var self = this
                        var datey = new Date()
                        module.ajax({
                            url: '/wxmp/ajax/wishpool_rpc/list.json',
                            data: {
                                page: n,
                                pagesize:8,
                                timeNum: datey.getTime()
                            },
                            success: function (res) {
                                self.addScroll()
                                self.goodsList = self.goodsList.concat(res.rows)
                                self.pageIndex += 1
                                if(n==1){
                                    self.totalPage = Math.ceil(res.total/res.pagesize)
                                }
                                if(self.totalPage>1){
                                    self.showLoadBox = true
                                }
                                if (res.hasWishlist && n==1) {
                                    self.hasWishlist = res.hasWishlist
                                    $('.my-wish-btn img').attr('src', '/static/images/qingdan.png')
                                }
                            }
                        })
                    },
                    addScroll:function(){
                        window.addEventListener('scroll', this.handleScroll);
                    },
                    removeScroll:function(){
                        window.removeEventListener('scroll', this.handleScroll);
                    },
                    handleScroll: function () {
                        var self = this;
//                        console.log("aaa "+self.pageIndex)
//                        console.log("滚动高度: "+$(window).scrollTop())
//                        console.log(self.pageIndex)
                        if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
//                            console.log('到底')
                            self.removeScroll(self.pageIndex)
                            if (self.pageIndex <= self.totalPage) {
                                self.showIcon = true
                                self.loadWord = '加载中...'
                                setTimeout(function () {
                                    self.getList(self.pageIndex)
                                }, 500)
                            } else {
                                self.showIcon = false
                                self.loadWord = '我是有底线'
                            }
                        }
                    },
                    dropDown: function () {
                        if (this.flag) {
                            $('.menu-btn').css('opacity', '0')
                            $('.dropdown-icon').removeClass('icon-caidan1').addClass('icon-iconfontguanbi')
                            $('body').css('overflow', 'hidden')
                            $('.drop-down').animate({height: '100%'}, 300, 'swing')
                            $('.menu-btn').animate({opacity: '1'}, 300, 'swing')
                            $('.my-wish-btn').animate({right: '-80px'}, 300, 'swing')
                            $('.dropdown-icon').css('font-size', '28px')
                            this.flag = false
                        } else {
                            $('.menu-btn').css('opacity', '0')
                            $('.menu-btn').animate({opacity: '1'}, 300, 'swing')
                            $('.drop-down').animate({height: '0'}, 300, 'swing')
                            $('.my-wish-btn').animate({right: '0px'}, 300, 'swing')
                            $('.dropdown-icon').css('font-size', '33px')
                            $('.dropdown-icon').removeClass('icon-iconfontguanbi').addClass('icon-caidan1')
                            $('body').css('overflow', 'auto')
                            this.flag = true
                        }
                    },
                    addWish: function (e, item) {
                        var self = this
                        var $box = $(e.target).parents('.item-bottom-box')
                        if ($box.find('.item-btn-box').hasClass('item-btn-red')) {
                            module.toasty('该愿望已添加', 1000)
                            return
                        }
                        console.log(item.itemId)
                        module.ajax({
                            url: '/wxmp/ajax/wishlist_rpc/add.json',
                            data: {
                                itemId: item.itemId
                            },
                            success: function (res) {
                                console.log('添加成功')
                                console.log(res)
                                if (!self.hasWishlist) {
                                    self.hasWishlist = true
                                    $('.my-wish-btn img').attr('src', '/static/images/qingdan.png')
                                }
                                $box.find('.item-btn-box').removeClass('item-btn-white').addClass('item-btn-red')
                                $box.find('i').removeClass('icon-guanzhu2').addClass('icon-xin')
                                $box.find('.btn-word').html('已加入')
                                module.toasty('加入成功', 1000)
                                self.cartFly(e, item)
                            }
                        })
                    },
                    cartFly: function (e, item) {
                        var self = this;
                        var winW = $(window).width()
                        var winH = $(window).height()
                        flyer = $('<img ' + 'class="flyer_img" style="position: relative;z-index: 20000" src="' + item.imageUrl + '"/>')
                        flyer.fly({
                            start: {
                                left: e.clientX - 30,//抛物体起点横坐标
                                top: e.clientY - 30 //抛物体起点纵坐标
                            },
                            end: {
                                left: winW - $(".my-wish-btn").width(),//抛物体终点横坐标
                                top: 20, //抛物体终点纵坐标
                                width: 0,
                                height: 0,
                            },
                            onEnd: function () {
                                this.destroy(); //销毁抛物体
                            }
                        });
                    }
                }
            })

        });
    })();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值