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

用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)
 },

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

总结

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

时间: 2020-06-18

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

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

微信小程序 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事

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

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

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

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

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

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

微信小程序 chooseImage选择图片或者拍照

微信小程序 chooseImage选择图片或者拍照 一.使用API wx.chooseImage(OBJECT) var util = require('../../utils/util.js') Page({ data:{ src:"../image/pic4.jpg" }, gotoShow: function(){var _this = this wx.chooseImage({ count: 9, // 最多可以选择的图片张数,默认9 sizeType: ['original'

微信小程序自定义导航隐藏和显示功能

微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便实现,能直接操作document.在微信小程序中实现思路是:在逻辑层定义变量,通过setData赋值. 方法一:通过变量直接赋值,给每一个要控制显示的view定义变量 .wxml 代码: <!--index.wxml--> <view class="navView" bi

微信小程序调用PHP后台接口 解析纯html文本

微信小程序调用PHP后台接口,解析纯html文本,效果图片预览 1.微信js动态传参: wx.request({ url: 'https://m.****.com/index.php/Home/Xiaoxxf/activity_detail?a_id='+options.id,//含富文本html data: { is_detail:1 }, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT heade

微信小程序调用微信支付接口的实现方法

前言:应项目要求,需要使用微信小程序做支付,写完后告知手续费太高方案不予通过(宝宝心里苦,但宝宝不说).此次开发在因站在巨人的肩膀上顺利完成. 微信支付文档传送门:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3 1.开发工具: Eclipse+Tomcat+微信web开发工具 2.开发环境: java+maven 3.开发前准备: 3.1 所需材料 小程序的appid,APPsecret,支付商户号(mch_i

解决微信小程序调用moveToLocation失效问题【超简单】

上图所示,mapUpdated表示地图加载完成后,再初始化数据. 为什么moveToLocation失败? 第一:可能你的ID取错了: 第二:调用moveToLocation时,必须需要调用wx.getLocation,并且用户授权后,才能使用moveToLocation方法 总结 以上所述是小编给大家介绍的解决微信小程序调用moveToLocation失效问题[超简单],希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 如果你觉得本文

详解微信小程序调用支付接口支付

我前段时间做微信支付,遇到了很多坑,网上也没有讲解的特别明白的,通过借鉴各路人才的经验,最后也完成了,网上有很多讲解,我在这只讲一些注意点和解决的方法.我就讲讲我从完全懵到完成的过程吧. 在微信提供的接口文档中提供了一个微信支付接口,应该是直接调用这个接口就可以发起微信支付 文档路径:https://developers.weixin.qq.com/miniprogram/dev/api/api-pay.html#wxrequestpaymentobject 但是,当开始信心满满的去看所需参数时

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

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

微信小程序实现多个按钮toggle功能的实例

微信小程序实现多个按钮toggle功能的实例 如下图所示,实现该按钮toggle功能. 百度上很多都是只设置一个按钮的toggle,所以我现在来稍微总结下:多个按钮如何实现自身的toggle功能. 原理: 1,列表展示的时候,我们会用wx:for 来循环数据,那么我们就会得到相应的当前的第几个数据(即 wx:key="index") 2.在每一个数据里面添加一个toggle的属性,toggle=false  则不展示, 3.设置一个点击方法,获取当前按钮所在的是第几个数据,然后将相应的

微信小程序获取手机号授权用户登录功能

小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <span style="font-size:14px;"><button open-type="get