微信小程序功能之全屏滚动效果的实现代码

想做一个全屏滚动的效果,于是在网上找了一个差不多的例子,但是觉得有些地方不是很好,于是改进了一下;

先给大家展示下效果图,感觉不错,请参考实例代码。

代码:

wxml: 

<!-- 第一页 -- >
  <view id='hook1' class="section section01 {{scrollindex==0?'active':''}}" style='background:red' bindtouchstart="scrollTouchStart" bindtouchmove='scrollTouchMove' bindtouchend="scrollTouchEnd">
      <view class='cont'>
        <view class='cont-body'>
          <view>one</view>
        </view>
      </view>
    </view>
    <!-- 第二页 -->
    <view id='hook2' class="section section02 {{scrollindex==1?'active':''}}" style='background:pink' bindtouchstart="scrollTouchStart" bindtouchmove='scrollTouchMove' bindtouchend="scrollTouchEnd">
      <view class='cont'>
        <view class='cont-body'>
          <view>two</view>
        </view>
      </view>
    </view>
    <!-- 第三页 -->
    <view id='hook3' class="section section03 {{scrollindex==2?'active':''}}" style='background:blue' bindtouchstart="scrollTouchStart" bindtouchmove='scrollTouchMove' bindtouchend="scrollTouchEnd">
      <view class='cont'>
        <view class='cont-body'>
          <view>three</view>
        </view>
      </view>
    </view>
    <!-- 第四页 -->
    <view id='hook4' class="section section04 {{scrollindex==3?'active':''}}" style='background:green' bindtouchstart="scrollTouchStart" bindtouchmove='scrollTouchMove' bindtouchend="scrollTouchEnd">
      <view class='cont'>
        <view class='cont-body'>
          <view>foure</view>
        </view>
      </view>
    </view>

wxss:

page {
  height: 100%;
  background: fff;
  color: #282828;
}
.container {
  flex: 1;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0;
  align-items: initial;
  justify-content: first baseline;
}
.container-fill {
  height: 100%;
  overflow: hidden;
}
.scroll-fullpage {
  height: 100%;
}
.section {
  height: 100%;
}
.cont {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}
.cont .cont-body {
  width: 75%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

js:

Page({
  /**
   * 页面的初始数据
   */
  data: {
      scrollindex: 0, // 当前页面的索引值
        totalnum: 4, // 总共页面数
        starty: 0, // 开始的位置x
        startTime: 0,  // 开始的时间戳
        endy: 0, // 结束的位置y
        endTime: 0,  // 结束的时间戳
        critical: 80, // 触发翻页的临界值
        maxTimeCritical: 300,  // 滑动的时间戳临界值上限
        minTimeCritical: 100,  // 滑动的时间戳临界值下限
        margintop: 0, // 滑动下拉距离
      currentTarget: null,  // 当前点击的元素的id
  },
  scrollTouchStart: function(e) {
    let py = e.touches[0].pageY,
      stamp = e.timeStamp,
      currentTarget = e.currentTarget.id;
    console.log(py);
    this.setData({
      starty: py,
      startTime: stamp,
      currentTarget: currentTarget
    })
  },
  scrollTouchMove(e) {
    // console.log(e);
  },
  scrollTouchEnd: function(e) {
    let py = e.changedTouches[0].pageY,
      stamp = e.timeStamp,
      d = this.data,
      timeStampdiffer = stamp - d.startTime;
    this.setData({
      endy: py,
      endTime: stamp
    })
    console.log('开始:' + d.starty, '结束:' + e.changedTouches[0].pageY);
    console.log('时间戳之差: ' + timeStampdiffer);
    if (timeStampdiffer <= d.maxTimeCritical && timeStampdiffer > d.minTimeCritical && (d.starty > e.changedTouches[0].pageY)) {
      let currentTarget = parseInt(d.currentTarget.slice(4)),
        nextTarget = currentTarget + 1;
      const query = wx.createSelectorQuery();
      query.select(`#hook${nextTarget}`).boundingClientRect();
      query.selectViewport().scrollOffset();
      query.exec(function (res) {
        // console.log(res);
             if (res[0] != null) {
          wx.pageScrollTo({
            scrollTop: res[0].height * currentTarget,
          })
        }
      })
      } else if (timeStampdiffer <= d.maxTimeCritical && timeStampdiffer > d.minTimeCritical && (d.starty < e.changedTouches[0].pageY)) {  // 下拉
      let currentTarget = parseInt(d.currentTarget.slice(4)),
        preTarget = currentTarget - 2 == -1 ? 0 : currentTarget - 2;
        const query = wx.createSelectorQuery();
        query.select(`#hook1`).boundingClientRect();
        query.selectViewport().scrollOffset();
        query.exec(function (res) {
          console.log(res);
          wx.pageScrollTo({
            scrollTop: res[0].height * preTarget
          })
        })
      }
   },
})

总结

以上所述是小编给大家介绍的微信小程序功能之全屏滚动效果的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 微信小程序滚动Tab实现左右可滑动切换

     微信小程序滚动Tab实现左右可滑动切换 效果: 最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当前屏中. 一.wxml结构 tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动. tab内容可左右滑动切换,使用swiper组件实现 为了偷懒,所以数据都通过wx:for遍历重复出来. 说明: 1.设置data-current

  • 微信小程序 滚动到某个位置添加class效果实现代码

    微信小程序滚动到某个位置添加class效果 <scroll-view scroll-y="true" style="height:100vh;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-top="{{scrollY}}"> <view> 假设这里有

  • 微信小程序实现自上而下字幕滚动

    本文实例为大家分享了微信小程序实现字幕滚动的具体代码,供大家参考,具体内容如下 需求: 实现框内的文字自下而上的自动循环滚动. 解决方案: 第一种方法: 经查询,最一开始实现字幕滚动是使用的微信小程序的swiper组件,后来发现,使用swiper组件实现的效果类似于轮播图,不符合需求. <swiper class="swiper_container" vertical="true" autoplay="true" circular=&quo

  • 微信小程序scroll-view实现滚动穿透和阻止滚动的方法

    scroll-view滚动穿透,阻止滚动 页面弹窗阻止滚动是一种常见的问题,这里简单介绍小程序scroll-view的一种解决方式 常用阻止滚动方式 在不使用scroll-view的弹窗中, 为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的页面因事件穿透滚动 <view catchtouchmove="doNothing"></view> 也可直接写catchtouchmove,相当于绑定了事件名为t

  • 微信小程序-滚动消息通知的实例代码

    写在前面: 这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置为true来实现上下滚动. (需要注意的是:只要你的swiper存在vertical属性,无论你给值为true或者false或者不设参数值,都将实现上下滚动) 从深圳回来做了一个微信小程序的小项目,令人欣慰的一点事是,回来很快时间内把在深圳两天的房租给赚回来了,哈哈... wxml <s

  • 微信小程序scroll-view组件实现滚动动画

    本文实例为大家分享了scroll-view组件实现索引列表滚动动画效果,供大家参考,具体内容如下 效果图 实现原理 利用scroll-view的scroll-into-view属性进行定位: 利用scroll-view的scroll-with-animation属性实现滚动动画过度. WXML <view class="right-nav"> <view bindtap="getCurrentCode" class="{{chooseIn

  • 微信小程序顶部可滚动导航效果

    需求是小程序做头部做导航分类的效果 顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,内容用类似模板方式引用,可重复利用 <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%"> <view wx:for="{{classify}}" wx:key="id" data-type

  • 微信小程序之滚动视图容器的实现方法

    微信小程序之滚动视图容器的实现方法 直接上两种方案代码以及效果图: 方案1 这种方案是直接使用view,并设置overflow: scroll wxml: <view class="container"> <view class="content" wx:for="{{11}}" wx:key="item"> {{item}} </view> </view> wxss: .con

  • 微信小程序功能之全屏滚动效果的实现代码

    想做一个全屏滚动的效果,于是在网上找了一个差不多的例子,但是觉得有些地方不是很好,于是改进了一下: 先给大家展示下效果图,感觉不错,请参考实例代码. 代码: wxml: <!-- 第一页 -- > <view id='hook1' class="section section01 {{scrollindex==0?'active':''}}" style='background:red' bindtouchstart="scrollTouchStart&qu

  • 微信小程序开发之左右分栏效果的实例代码

    本文以一个简单的小例子,简述在微信小程序开发中左右分栏功能的实现方式,主要涉及scroll-view ,列表数据绑定,及简单样式等内容,属于初级入门内容,仅供学习分享使用. 概述 在微信小程序开发中,左右分栏(左边显示分类,右边显示明细,然后进行联动)是一种常见的布局方式,多应用于点餐,冷饮店,外卖,以及其他类似的商城. 布局分析 布局分析图示如下: 涉及知识点 •scroll-view 可滚动视图区域.使用竖向滚动时,需要给<scroll-view>一个固定高度,通过 WXSS 设置 hei

  • 微信小程序实现多行文字滚动效果

    本文实例为大家分享了微信小程序实现多行文字滚动的具体代码,供大家参考,具体内容如下 wxml <view class="full" style="height:100%;overflow:hidden"> <swiper autoplay="true" interval="3000" duration="500" circular="true" vertical=&qu

  • 微信小程序实现3D轮播图效果(非swiper组件)

    本文实例为大家分享了微信小程序实现3D轮播图效果的具体代码,供大家参考,具体内容如下 首先上一下效果图: 在做的时候首先想到的是用swiper组件但是发现swiper组件放进去图片的时候会没有3d的效果,原因是swiper组件自带的style属性限制了3d效果所需要的属性,所以单独写了一个组件. index.html <view class='page-con'> rotate.wxml <view class='stage'> <view class='wrapper' b

  • 微信小程序实现购物车选择规格颜色效果

    本文实例为大家分享了微信小程序实现购物车选择规格颜色效果的具体代码,供大家参考,具体内容如下 wxml: <view>   <view>规格:</view>   <view class='dis'>     <block wx:for="{{guige}}">       <view class="{{gindex==index?'color':''}}" bindtap='guige' data-i

  • 微信小程序scroll-view锚点链接滚动跳转功能

    html <view class="list"> <view bindtap='jumpTo' wx:for="{{keys}}" data-item="{{item}}">{{item}}</view> </view> <scroll-view scroll-into-view="{{toitem}}" scroll-y="true" scroll-w

  • 微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)

    下面一小段代码给大家介绍微信小程序 功能函数 密码验证*,具体代码如下所示: //登录输入密码 userPasswordInput: function (e) { var that = this; this.setData({ userPassword: e.detail.value }) // console.log(e.detail.value.length) // console.log(e.detail.value); var value = e.detail.value var str

  • 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

    本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY() 属性,给需要动画的元素添加上一个动画class. 先上效果图: 1.蒙层的结构: <!-- 购物车蒙层 --> <view class='list-fix' wx:if="{{mengShow}}" bindt

  • 解决微信小程序scroll-view组件无横向滚动的问题

    微信开放文档中scroll-view组件的部分代码如下 <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%"> <view id="demo1" class="scroll-view-item_H demo-text-1"></vi

  • 如何在微信小程序中使用骨架屏的步骤

    本文介绍了微信小程序中使用骨架屏,分享给大家,具体如下: 先上效果图 ​ 骨架屏主要起到占位作用,向用户说明该区域有内容,有一定的心理准备. 聊聊背景:刚上线一款小程序,随着上架的东西越来越多,微信小程序加载越来越慢,会出现一段时间的白屏(大概2-3s),这对用户体验上来讲特别不友好.所以在网上开始找这方面的资料,骨架屏主要分为两种方案,下面来说说这两种方案. 1.为每个需要使用骨架屏的页面定制一套静态页面.这种方法缺点很明显,需要为每个页面单独定制,布局如果修改则需要同时修改两个页面,增加了维

随机推荐