小程序-点击按钮回到顶部1

以下代码的缺点：点击顶部按钮是直接回到顶部，而不是均匀的滑动至顶部

<scroll-view class="bigWrap" scroll-y="true" scroll-top="{{scrollTop}}" bindscroll="scroll" style="position: absolute; left: 0; top:0; bottom: 0; right: 0;">

<view>

<view class=‘li‘>我是第一段</view>

</view>

</view>

</scroll-view>

data: {

scrollTop: 0

goTop: function (e) {

this.setData({

scrollTop: 0

})

scroll: function (e, res) {

// 容器滚动时将此时的滚动距离赋值给 this.data.scrollTop

if (e.detail.scrollTop > 500) {

this.setData({

floorstatus: true

});

} else {

this.setData({

floorstatus: false

});

}

.bigWrap{

background:#eee;

}

.com-widget-goTop {

position: fixed;

bottom: 125px;

right: 5px;

background: rgba(0,0,0,0.48);

border-radius: 50%;

overflow: hidden;

z-index: 500;

}

.com-widget-goTop .icon-gotop{

">rgba(0,0,0,0.8);

display: inline-block;

width: 50px;

height: 50px;

line-height: 50px;

font-size: 12px;

color: #ffffff;

text-align: center;

border-radius: 50%;

}

.li{

height: 200rpx;

line-height: 200rpx;

background: #ff0000;

border-bottom: 1px solid #ffffff;

}

原文地址：https://www.cnblogs.com/liuqingxia/p/8744156.html

时间： 2024-08-23 11:15:45

小程序-点击按钮回到顶部1的相关文章

初识安卓小程序(点击按钮切换屏幕颜色)

如图,点击按钮就会切换屏幕的颜色首先,先创建一个安卓项目(我的版本是4.4.2的),名字为"world",当然,也可以别的名称然后在res文件夹下找到layout文件夹,找到activity_main.xml或fragment_main.xml,在里面输入或拖拽按钮 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="htt

开发第一个IOS小程序 - 点击按钮文字变色

1. 题目:实现点击按钮切换文字对应的颜色 2.分析大致的开发步骤是 •添加所需要的UI元素:3个按钮(UIButton).1个文本标签(UILabel) •监听3个按钮的点击事件 •改变文本标签的文字颜色 3.具体实现步骤 3.1 在storyboard文件中,拖拽相应控件器上,布局好以上显示页面效果 3.2 然后利用Xcode右端上的“圆圈”按钮,将代码区分割成 “Main.storyboard”与“viewController.m”文件,两个可以按住control键,不要放开,将以上元素拖

点击按钮回到顶部

写页面的时候,经常遇到当滚动条离开页面顶部的时候,会显示一个回到顶部的按钮,点击回到顶部,页面就滑动到页面的顶部.直接贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>返回顶部</title> <script src="jquery-1.11.3.js"></script> <style&

Vue中点击按钮回到顶部（滚动效果）

页面滚动到一定位置时,出现回到顶部按钮代码如下 HTML <div class="footer"> <div class="gotop" v-show="gotop" @click="toTop">Top</div> </div> CSS .footer .gotop { text-align: center; position: fixed; right: 50px; bot

小程序点击按钮退出小程序

很简单的只要把文档看详细了就ok <navigator hover-class="none" target="miniProgram" open-type="exit"> 退出当前小程序</navigator> 原文地址:https://www.cnblogs.com/MicKing/p/10773389.html

小程序点击按钮清空input

大致的思路是先给标签input设置一个value <input value="{{value}}" placeholder="最大输入长度10"/> 然后就通过按钮的点击事件来把这个value变成空 setValue:function () { this.setData({ value:"" }) } 就是这么简单,一步到位

小程序点击按钮打开一个视频

原文地址:https://www.cnblogs.com/antyhouse/p/9356276.html

重复点击主界面(TabBar)按钮刷新界面--点击状态栏回到顶部

1.监听按钮点击 2.判断是否是点击的同一个按钮(记录上次点击的按钮) 3.当重复点击相同按钮时,需要获取当前按钮对应控制器刷新界面 3.1 判断是否重复点击按钮,代码写在哪里? 点击标题按钮,属于精华控制器的事情,所以找到精华控制器.写在点击按钮方法里面 3.2怎么拿到按钮对应的控制器? 通过当前按钮的tag值,从精华控制器的子控制器数组中去 3.3怎么让对应的控制器刷新界面? 在对应的控制器里面提供刷新方法,这样每个控制器都要写,太麻烦之前我们抽取了父类,只需要在父类中提供一个刷新界面方法

iOS开发——实用技术OC片&点击状态栏回到顶部

点击状态栏回到顶部经常我们在使用一个App的时候,比如QQ,微信等流行App都会有一个很常见的功能,就是当我们刷新了很多节目的时候,先立刻回到顶部只需要轻轻点一下状态栏就可以(当然这种方法不是谁都知道的,因为app没有提示),也有的会在屏幕的右下角或者某个位置放置一个按钮实现点击按钮一样可以回到顶部,那样实现虽然可以,也不是很麻烦,但是其实系统已经为我们提供了一个很好的自带的功能,我们为什么不用呢? 但是最近在自己视线这个功能的时候遇到了一个小小的问题,那就拿出来分享一下,当然前面也有说到类似