关于uniapp回到顶部-支持小程序与H5 + 图片压缩

一时失言乱红尘 2023-07-17 06:40 20阅读 0赞

\*\*

## [\#\# \[ 大图片压缩\]][Link 1] ##

\*\*

HTML滚动条

<scroll-view class="wrap" scroll-y='true' :scroll-top="scrollTop" @scroll="scroll" scroll-with-animation='true'>...</scroll-view>

返回顶部按钮

<view class="to-top" @click="goTop">
    			<image src="../../../static/lesson/top.png" mode="widthFix"></image>
    </view>

CSS

.to-top{ 
    		width: 70upx;
    		height: 70upx;
    		border-radius: 50%;
    		background-color: #4a81f6;
    		position: fixed;
    		right: 23upx;
    		bottom: 300upx;
    		z-index: 9999;
    		box-shadow: 0px 3px 5px 3px #93a2c1;
    		@include flex($content:center);
    		image{ 
    			width: 36upx;
    			height: auto;
    		}
    	}

JS  
数据

data(){ 
    	return{ 
    	//滚动条位置
    				scrollTop:0, //
    				old: {   
                    scrollTop: 0 
    				}
    	}
    }

返回顶部事件

/** * 返回顶部 */
    	//记录滚动条位置
    scroll: function(e) { 
    	this.old.scrollTop = e.detail.scrollTop
    },
    	//记录滚动条位置
    goTop: function(e) { 
    	this.scrollTop = this.old.scrollTop
    	//在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。
    	this.$nextTick(function() { 
    		this.scrollTop = 0
    	});
    },

![在这里插入图片描述][20200320110234375.jpg]

[Link 1]: https://www.55776.club/baiyi/imgGiz
[20200320110234375.jpg]: /images/20230528/487ac4ec4b5e49de8d5ad7bbf24e14ee.png

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 h5图片压缩上传

1、图片上传过慢，图片进行压缩上传 ![1021765-20190706163117700-599513873.png][] <div class="form-it

偏执的太偏执、/ 2023年08月17日 15:47/ 0 赞/ 178 阅读

相关关于uniapp回到顶部-支持小程序与H5 + 图片压缩

\\ [\\ \[ 大图片压缩\]][Link 1] \\ HTML滚动条 <scroll-view class="wrap" scroll-y='true

一时失言乱红尘/ 2023年07月17日 06:40/ 0 赞/ 21 阅读

相关小程序转h5步骤(利用uniapp)

1.介绍个好用的工具，那便是miniprogram-to-uniapp自动转换工具。 2.全局安装此工具，命令行如下 npm install minipro

超、凢脫俗/ 2023年03月13日 06:09/ 0 赞/ 22 阅读

相关 H5跳转小程序，uniapp跳转小程序

网页跳转小程序需要使用微信的开放标签 [wx-open-launch-weapp][] ，使用开放标签需要使用微信的jssdk，然后sdk的版本不能低，低版本点击无效。先给

以你之姓@/ 2023年01月17日 07:48/ 0 赞/ 298 阅读

相关小程序返回到顶部

1. wxml <scroll-view scroll-y lower-threshold="100" id="scroller" bindscrolltolowe

Myth丶恋晨/ 2022年12月29日 09:35/ 0 赞/ 177 阅读

相关 uniapp小程序页面来回点击回到顶部

客户要求，小程序页面过长，来回点击，页面必须回到顶部。在onShow里加上这个就好了 onShow() { setTimeout(() => {

梦里梦外;/ 2022年11月21日 11:54/ 0 赞/ 451 阅读

相关【微信小程序】2021--回到顶部

returnTop(){ console.log('回到顶部-->') if (wx.pageScrollTo) {

淡淡的烟草味﹌/ 2022年10月11日 15:54/ 0 赞/ 219 阅读

相关微信小程序回到顶部的简单方法

wxml中： <image src='../../img/top.png' class='goTop' hidden='{ {!floorstatus}

本是古典何须时尚/ 2022年10月02日 05:58/ 0 赞/ 183 阅读

相关 uniapp 图片压缩

传入图片地址，返回图片base64内容 function detailImage(path, callback) { plus.io.resolveL

ゞ浴缸里的玫瑰/ 2022年09月10日 00:12/ 0 赞/ 255 阅读

相关小程序回到顶部

onPageScroll: function (e) { // console.log(e) if (e.scrollTop > 100

左手的ㄟ右手/ 2021年12月12日 02:11/ 0 赞/ 363 阅读