精华内容
下载资源
问答
  • 微信小程序屏幕自动向下滚动

    千次阅读 2018-07-24 10:16:17
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: wx.pageScrollTo(OBJECT) 基础库 1.4.0 开始支持,低版本需做兼容处理 将页面滚动到目标位置。 OBJECT参数说明: 参数名 ...

    微信小程序开发交流qq群   173683895

       承接微信小程序开发。扫码加微信。

    正文:

    wx.pageScrollTo(OBJECT)

    基础库 1.4.0 开始支持,低版本需做兼容处理

    将页面滚动到目标位置。

    OBJECT参数说明:

    参数名类型必填说明
    scrollTopNumber滚动到页面的目标位置(单位px)
    durationNumber滚动动画的时长,默认300ms,单位 ms

    这个API放在任何函数里面都可以

    示例代码:

    wx.pageScrollTo({
      scrollTop: 100,
      duration: 300
    })
    展开全文
  • 微信小程序 屏幕滚动监听

    千次阅读 2020-07-13 15:30:31
    //当滚动的top值最大或者最小时,为什么要做这一步是由于在手机实测小程序的时候会发生滚动条回弹,所以为了解决回弹,设置默认最大最小值 if (ev.scrollTop <= 0) { ev.scrollTop = 0 } else if (ev....

    一、监听屏幕滚动 判断上下滚动

    onPageScroll: function (ev) {
        console.log(ev)
        let _this = this
        //当滚动的top值最大或者最小时,为什么要做这一步是由于在手机实测小程序的时候会发生滚动条回弹,所以为了解决回弹,设置默认最大最小值
        if (ev.scrollTop <= 0) {
          ev.scrollTop = 0
        } else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
          ev.scrollTop = wx.getSystemInfoSync().windowHeight;
        }
        //判断浏览器滚动条上下滚动
        if (ev.scrollTop > _this.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
          console.log('向下滚动'+ev.scrollTop);
        } else {
          console.log('向上滚动'+ev.scrollTop);
        }
        //给scrollTop重新赋值
        setTimeout(function () {
          _this.scrollTop = ev.scrollTop
        }, 0)
      },
    

    二、设置屏幕返回顶部

    //设置屏幕滚动到顶部
    wx.pageScrollTo({
      scrollTop: 0
    })
    
    展开全文
  • 主要介绍了微信小程序点击item使之滚动屏幕中间位置,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序上下滚动

    2017-07-31 10:26:32
    微信小程序屏幕文字上下滚动

    小程序文字上下滚动,受到跑马灯效果启发,如果有更好的想法可以留言。


    <scroll-view scroll-y class="index_scroll">

              <view class="classname" style="margin-top:{{marqueeDistance}}px;">
                  <view class="index_scroll_list">
                    <view class="index_list_text">

                      <text>11111111111111111</text>

      <text>11111111111111111</text> 

      <text>11111111111111111</text>              

                  </view>
                </view>
                </view>

    </scroll-view>



    //js

    data:{
        marqueePace: 2,//滚动速度
        marqueeDistance: 30,//初始滚动距离
        marqueeDistance2: 0,
        size: 14,
        interval: 100 // 时间间隔
      },


    var length = 200;//长度
            var windowWidth = 380;// 屏幕长度
            that.setData({
              length: length,
              windowWidth: windowWidth,
              marquee2_margin: length < windowWidth ? windowWidth - length : that.data.marquee2_margin//当文字长度小于屏幕长度时,需要增加补白
            })

    that.run1();// 滚动


    run1: function () {


        var vm = this;


        var interval = setInterval(function () {




          if (-vm.data.marqueeDistance < vm.data.length) {




            vm.setData({


              marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace,


            });


          } else {


            clearInterval(interval);


            vm.setData({


              marqueeDistance: 30


            });


            vm.run1();


          }


        }, vm.data.interval);


      }

    展开全文
  • 微信小程序-监听屏幕滚动

    千次阅读 2019-03-19 17:17:53
    功能描述:监听屏幕滚动,实现向下滚动时搜索框和分类选项置顶,向上滚动页面恢复原样。 二、实现: 运用页面Page()函数中的onPageScroll方法,来监听屏幕滚动的距离。 1).js中: data:{ scrollTop:0, }, ...

    一、效果:

    功能描述:监听屏幕滚动,实现向下滚动时搜索框和分类选项置顶,向上滚动页面恢复原样。

    二、实现:

    运用页面Page()函数中的onPageScroll方法,来监听屏幕滚动的距离。

    1).js中:

    data:{
      scrollTop:0,
    },
    
    //监听屏幕滚动 判断上下滚动
      onPageScroll: function (ev) {
        this.setData({
          scrollTop: ev.scrollTop
        })
      },

    2).wxml页面中:

    • hidden属性来控制局部的显示与隐藏 
    • 三元操作符
    • 顶部固定
      <!--轮播图-->
      <view class="container-top" hidden="{{scrollTop>178?true:false}}">
       ........
      </view>
      <!--搜索-->
      <view class="collect-top {{scrollTop>178?'addClass':''}}">
       ......
      </view>
    /*搜索框置顶**/
    .addClass{
      position:fixed;
      top:0px;
    }

     

    展开全文
  • 1.获取屏幕宽度,并赋值给view wx.getSystemInfo({ success: function (res) { // console.log(res.windowWidth) 屏幕宽度 that.setData({ windowWidth: res.windowWidth }) } }) 2.最近遇到自定义弹窗滚动...
  • 跟随手指滑动,手指滑动结束后,智能判断当前视图是第几个视图,并且将当前视图显示在屏幕中央,支持纵向滚动即可 每个视图的宽度可控 提供每次滑动结束后的事件 提供滑动到第一个视图的事件,并提供当前是第几个视图...
  • 主要介绍了微信小程序清空输入框信息与实现屏幕往上滚动的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序无缝滚动

    2019-12-12 15:28:05
    微信小程序无缝滚动 wxml <view class="wrap-item" style='transform:translateX({{posLeft2}}px)'> <view class="messages-scroll firstScroll"> <view class="{{index == 0?'yanse items...
  • 微信小程序页面上下滚动

    万次阅读 多人点赞 2019-06-21 16:24:21
    开发交流QQ群:173683895 173683895 526474645 人满的请加其它群 看图 源码 <view class="container container-fill">...view class="scroll-fullpage" bindtouchstart="scrollTouchstart" bindtouchmove=...
  • 代码地址如下:... 一、前期准备工作 软件环境:微信开发者工具 ...1、基本需求。 我们在学习微信小程序或者做项目时,应该会遇到滚动通知效果情况,那么这个滚动通知功能我们应该怎...
  • 10分钟入门 - 微信小程序开发

    万次阅读 多人点赞 2019-01-09 21:33:14
    注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。 接着填写...
  • Uniapp框架的针对微信小程序的使滚动条跳转到指定元素位置。直接复制粘贴内容,然后配置好page.json。就可以直接查看效果。
  • 微信小程序实现文字滚动

    万次阅读 2018-09-14 13:40:48
    微信小程序实现文字滚动 1.wxml &lt;view class="container"&gt; &lt;view class='list' animation="{{animationData}}"&gt; &lt;view&gt; &lt;text class=&...
  • wx.showToast(OBJECT)显示消息提示窗----显示loading菊花用的 2.需要用到的属性 (此图片来源于网络,如有侵权,请联系删除! ) 3.scrol-view需要指定一个高度,这个高度可以按自己的需求计算,我使用的是屏幕可用...
  • 当蒙层出现的时候,你滚动屏幕,底部内容也一起跟着滚动。 这就是蒙层穿透, 也可以叫 ‘滚动穿透’. 当然出现这种情况, 用户体验当然是不好的了。 所以作为一个有点追求的工程师当然是不允许这种情况的发生了(手动...
  • 主要为大家详细介绍了微信小程序页面滑动屏幕加载数据效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • view ... text: "这是一条农协... marqueeDistance: 0,//初始滚动距离 marquee_margin: 30, size:14, interval: 20 ,// 时间间隔 HomeIndex:0, }, onShow: function () { var that = this; var lengt..
  • 微信小程序上实现滚动播放等视频相关的效果
  • 微信小程序水平滚动

    2020-08-11 14:11:53
    <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%"> <view id="demo1" class="scroll-view-item_H "></view> <view id="demo2" class="scroll-...
  • 微信小程序仿全屏滚动切换动画
  • 微信小程序

    2021-01-19 13:36:38
    为什么是微信小程序1.2.微信小程序历史1.3.疯狂的微信小程序1.4.还有其他的小程序 不容忽视1.5.体验1.5.1.官方微信小程序体验1.5.2. 优秀的微信第三方小程序2.环境准备2.1.注册账号2.2.获取APPID2.3.开发工具3.第一...
  • 微信小程序滚动到底部加载新数据

    千次阅读 2020-04-26 22:31:25
    最近在玩微信小程序 然后实现一个滚动到底部加载数据的功能 微信小程序呢还是挺简单的,只要看懂文档基本上都可以学会 那么直接上代码吧 wxml部分 <scroll-view scroll-y='true' style="height:{{height}}px;" ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,444
精华内容 2,577
关键字:

微信滚动屏幕小程序