微信小程序中的滑动页面隐藏和显示组件功能的实现代码

用csdnAPP的用户都知道，在发布blink动态时，那个红色按钮会随着你滚动页面消失或者出现。往上滑动时，按钮消失。往下滑动时，按钮出现。

今天我们就模仿一下这个功能，只不过我们换中样式，让它逐渐滑出页面，或逐渐从页面之外滑到固定位置。

效果图：
滑动前：

滑动后：

此功能是往上滑动消失，往下滑动出现。

实现步骤：

  • 编写页面代码与样式
  • 编写逻辑代码

wxml:

<view class="mask-con {{!hidden ? 'mask-con-show' : ''
}
}
sendDynamic" bindtap="sendDynamic">
    <image class="sendDynamic mask-con
	{
	{
	!hidden ? 'mask-con-show' : ''
	}
	}
	" src="cloud://hualibiaobaiqiang-1omla.6875-hualibiaobaiqiang-1omla-1302418355/me_icon/发布.png">
	</image>
</view>

wxss：

.sendDynamic{
  height: 100rpx;
  width: 100rpx;
  bottom:100rpx;
  right: 60rpx;
  border-radius: 50%;
  position: fixed;
  box-shadow:5rpx 5rpx 5rpx #fccee5;
}
.mask-con{
  transition: 0.5s;
  position: fixed;
  width: 100rpx;
  height: 100rpx;
  bottom:-100rpx;
  right: 60rpx;
  text-align: center;
  line-height: 100rpx;
  }
.mask-con-show{
  bottom: 100rpx;
}

js:

data: {
  hidden:false,
  scrollTop: 0
 },
 onPageScroll(ev){
  var _this = this;
  if (ev.scrollTop <= 0) {
   ev.scrollTop = 0;
  } else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
   ev.scrollTop = wx.getSystemInfoSync().windowHeight;
  }
  if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
   this.setData({
    hidden:true
   })
  } else {
   this.setData({
    hidden:false
   })
  }
  setTimeout(function () {
   _this.setData({
    scrollTop: ev.scrollTop
   })
  }, 0)
 },

以上简单三步，完成目标。

总结

到此这篇关于微信小程序中的滑动页面隐藏和显示组件功能的实现代码的文章就介绍到这了,更多相关小程序滑动页面隐藏和显示组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序 scroll-view隐藏滚动条详解

    微信小程序 scroll-view隐藏滚动条详解

    一:scroll-view隐藏滚动条 在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js 最终显示效果如下; 注意: (1)不能在scroll-view中使用textarea,mao,canvas,video组件 (2)scroll-init-view的优先级高于scroll-top (3)onPullDownRefresh事

  • 微信小程序调用摄像头隐藏式拍照功能

    微信小程序最近非常火热,小编最近做了一个新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大家,具体内容如下: 问题 今天小编遇到了这么个问题,就是在用户使用App参加考试的时候调用摄像头抓拍用户是否作弊,其实这也没什么,关键在于不能打扰用户考试,不能被用户发现什么时候抓拍的,也不能给用户查看图片,只有考完是后才能查看.这系统相当于考驾照时的上机答题部分.开始经理的要求是调用小程序外部的手机拍摄功能,这

  • 微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件

    在微信小程序中,有遇到要展示店铺评分,或者是订单完成后对商品进行评价,用到了星星展示,查了下,在微信中无法使用svg实现图片,微信中只能将svg图片转成base64来显示,所以是在vue中使用的svg来实现评分 1.效果图 微信中的可以点击及显示,但是,显示的话,在4.2分,4点多分的时候,显示的是半颗星 vue中用的是svg实现,所以用的是占比的形式,可以有一点点的星 2.微信实现店铺评分显示及商品评价星星展示 子组件index.wxml,可以动态的控制星星的大小 <!-- (size * s

  • 微信小程序 实现动态显示和隐藏某个控件

    微信小程序 实现动态显示和隐藏某个控件 在小程序的开发过程中,经常需要用到隐藏某个控件这种情况. 因为项目原本是需要将两个canvas切换,但是小程序的canvas支持的功能实在是少,本来就jQuery mobile或者将canvas转为图片就可以很容易实现滑动效果,但是都不支持,最后只能是做一个canvas,需要时显示,不需要时隐藏. 实现方法: logs.wxml <view> <button bindtap="onChangeShowState">{{sh

  • 微信小程序动态的显示或隐藏控件的方法(两种方法)

    微信小程序动态的显示或隐藏控件的方法(两种方法)

    在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先 它的实现方法有两种, 第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下: <view class="{{showView?'bright789_view_show':'bright789_view_hide'}}"> <text class="bright789-text">我是被显示被隐藏控件</text>

  • 微信小程序中的滑动页面隐藏和显示组件功能的实现代码

    用csdnAPP的用户都知道,在发布blink动态时,那个红色按钮会随着你滚动页面消失或者出现.往上滑动时,按钮消失.往下滑动时,按钮出现. 今天我们就模仿一下这个功能,只不过我们换中样式,让它逐渐滑出页面,或逐渐从页面之外滑到固定位置. 效果图: 滑动前: 滑动后: 此功能是往上滑动消失,往下滑动出现. 实现步骤: 编写页面代码与样式 编写逻辑代码 wxml: <view class="mask-con {{!hidden ? 'mask-con-show' : '' } } sendD

  • 微信小程序之滑动页面隐藏和显示组件功能的实现代码

    微信小程序之滑动页面隐藏和显示组件功能的实现代码

    用csdnAPP的用户都知道,在发布blink动态时,那个红色按钮会随着你滚动页面消失或者出现.往上滑动时,按钮消失.往下滑动时,按钮出现. 今天我们就模仿一下这个功能,只不过我们换中样式,让它逐渐滑出页面,或逐渐从页面之外滑到固定位置. 效果图: 滑动前: 滑动后: 此功能是往上滑动消失,往下滑动出现. 实现步骤: 编写页面代码与样式 编写逻辑代码 wxml: <view class="mask-con {{!hidden ? 'mask-con-show' : '' } } sendD

  • 微信小程序中限制激励式视频广告位显示次数的实现思路

    微信小程序自从支持激励式视频广告位以后,很多小程序为了变现都加入了此广告位,广告正常观看结束的次数越多就越赚钱,但是观看次数的比率过高也会面临封号的风险,那么如何才能规避这个风险呢? 实现思路:限制每个用户当天观看激励式视频广告位的次数,如果用户当天观看广告位超过了一定的次数就不再显示广告位,用户第二天打开小程序时清空第一天观看广告的次数,下面用实例代码来说明. 第一步:在小程序的 onLaunch 里获取本地存储的上一次观看激励视频广告保存的时间,并获取本地存储观看广告位的次数,如果上一次观看

  • 微信小程序中的上拉、下拉菜单功能

    问题描述 在使用小程序的时候基本的页面的一般都是很简洁的,所以会有一些菜单来做简单的诠释说明,或者是提供一些选项.这些菜单的弹出方式一般是向上和向下,那么如何来设置这些上下拉的菜单呢? 解决方案 上下拉菜单在微信小程序中起提示.选项的功能,当点击它时会弹出属于这个菜单的相应选项.使用vant组件库,将 dist 文件提前下载好然后保存到项目中.在小程序中调用组件库,并在正确引用就可以实现了菜单功能了. 一.下拉菜单 (1)在 json 中调用 van-tab 组件. "usingComponen

  • 微信小程序中限制激励式视频广告位显示次数(实现思路)

    微信小程序自从支持激励式视频广告位以后,很多小程序为了变现都加入了此广告位,广告正常观看结束的次数越多就越赚钱,但是观看次数的比率过高也会面临封号的风险,那么如何才能规避这个风险呢? 实现思路:限制每个用户当天观看激励式视频广告位的次数,如果用户当天观看广告位超过了一定的次数就不再显示广告位,用户第二天打开小程序时清空第一天观看广告的次数,下面用实例代码来说明. 第一步:在小程序的 onLaunch 里获取本地存储的上一次观看激励视频广告保存的时间,并获取本地存储观看广告位的次数,如果上一次观看

  • 微信小程序仿抖音视频之整屏上下切换功能的实现代码

    效果演示: WXML: <view class="video_box"> <view bindtouchend="touchEnd" id="myVideo{{index}}" animation="{{animation}}" bindtouchstart="touchStart" bindtouchmove="touchMove" class="video

  • 微信小程序中多个页面传参通信的学习与实践

    前言 微信小程序越来越火,不少公司都在将原生代码转为微信小程序代码.在开发过程中,由于微信小程序wx.navigateBack方法并不支持返回传参,导致一些页面,尤其是从列表页面跳入详情页,用户在详情页改变了状态,返回后无论是否刷新页面,体验都不是很好.在android中,我们一般采用setresult方法来返回参数,或者直接使用rxjava框架或者eventbus框架来解决此类问题. 业务分析 此类需求大概意思是:A页面进入B页面,B页面返回并传值给A. 探索之路 刚开始我想采用一个比较偷懒的

  • 一步快速解决微信小程序中textarea层级太高遮挡其他组件

    一步快速解决微信小程序中textarea层级太高遮挡其他组件

    前言 由于小程序中的textarea组件是原生组件,而原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上,造成输入的文字会显示在小程序其他组件上,如下图所示: <view class='bar bottomfix shadow justify-center'> <button class='' formType="submit" type="primary" style='font-size:12pt

  • 微信小程序新手教程之页面打开数量限制

    微信小程序新手教程之页面打开数量限制

    前言 众所周知,无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页面的数量.在某些设计下,比如一个商品详情页面中会推荐其他的商品,这些商品点进去就是详情页面.详情页面中又有推荐,又可以点进去.这样重复下去打开的页面就会越来越多. 如果不做限制,当打开数量到一定程度的时候肯定会卡死了.在微信小程序中打开的页面不能超过10个,达到10个页面后,就不能再打开新的页面. 之前出现这个问

  • 微信小程序基于高德地图查找位置并显示文字

    这篇文章主要介绍了微信小程序基于高德地图查找位置并显示文字,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.根据经纬度在 地图上查找定位 var key = app.globalData.amapKey; var myAmapFun = new amapFile.AMapWX({ key: key }); myAmapFun.getRegeo({ iconPath: "../../assets/marker_checked.png"

随机推荐