uniapp 实战demo

1.uniapp 从列表进入详情页,再返回列表页时回到上次的浏览位置

javascript 复制代码
<script>
export default {
    data() {
        return {
            listData: [],
            scrollTop: 0,//浏览位置
        };
    },
    onShow() {
        this.getShopData();
    },
    onPageScroll: function (e) {
    	// 当页面滚动时保存值
        this.scrollTop = e.scrollTop;
    },
    onBackPress(options) {
        //列表页点击页面左上角的返回按钮时从本地缓存中移除指定的key
        if (options.from === 'backbutton') {
            uni.removeStorage({
                key: 'newsTop'
            });
            uni.navigateBack();
            return true;
        }
    },
    methods: {
        getShopData() {
            getShopList()
                .then((res) => {
                    this.listData = res.data.list.data;
					// 渲染完数据后将页面滚动到目标位置
                    uni.getStorage({
                        key: 'newsTop',
                        success: (res) => {
                            console.log(res);
                            if (res.data) {
                                uni.pageScrollTo({
                                    scrollTop: res.data,
                                    duration: 0,
                                });
                            }
                        },
                    });
                })
                .finally(() => {});
        },
        editShop(storeId = '') {
        	//跳转详情页时将最后的滚动距离存到缓存中
            uni.setStorage({
                key: 'newsTop',
                data: this.scrollTop,
            });
            uni.navigateTo({
                url: '/pages/edit/shop/shop?store_id=' + storeId,
            });
        },
        
    },
};
</script>
相关推荐
小磊哥er1 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
旷世奇才李先生6 分钟前
Next.js 安装使用教程
开发语言·javascript·ecmascript
ᥬ 小月亮11 分钟前
webpack基础
前端·webpack
YongGit30 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖2 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js