精华内容
下载资源
问答
  • 主要介绍了微信小程序页面滚动到指定位置代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序页面滚动到指定位置

    千次阅读 2019-09-20 15:01:32
    微信小程序页面滚动到指定位置

    假设页面上有位置#content,代码如下

    var query = wx.createSelectorQuery();
    query.selectViewport().scrollOffset();
    query.select("#content").boundingClientRect();
    query.exec(function (res) {
       console.log(res);
       var miss = res[0].scrollTop + res[1].top - 100;
       wx.pageScrollTo({
          scrollTop: miss,
          duration: 300
       });
    });

     

    展开全文
  • 微信小程序 页面滚动头部固定顶部

    千次阅读 2020-03-31 22:30:25
    // console.log(e.scrollTop) _this.setData({ scrollTop:e.scrollTop }) }得到滑动距离后,当页面滑动超出需要固定元素距离顶部的距离后使用css样式控制其定位,我写的是一个可以左右滑动的导航栏, 因此为要在...

    http://www.rioyi.com/a/news/fangan/235.html

    https://www.jb51.net/article/160371.htm

    https://www.cnblogs.com/lishuang2243/p/10998432.html

    我的代码:

    在小程序自带的方法 onPageScroll中可以得到滑动距离顶部的距离,在data公共数据中定义scrollTop,代码如下

    <view class="title {{scrollTop > 30 ? 'topnav' : ''}}">
    
    data: {
      scrollTop:0,
    }
    
    onPageScroll: function (e) {
        var _this = this;
        // console.log(e.scrollTop)
        _this.setData({
        scrollTop:e.scrollTop
        })
      },

    得到滑动距离后,当页面滑动超出需要固定元素距离顶部的距离后使用css样式控制其定位,

    因此为要在scroll-view中定义class="title {{scrollTop> 30 ? 'topnav' : ''}}"

    30就是我需要定义的模块距离顶部的距离,当超过这个距离就会执行css的topnav样式

    /* 头部固定 */
    .topnav{
      position: fixed;
      top: 0rpx;
      left: 0;
      z-index:99;
      background: #fff;
      padding: 3%;
      width: 94%;
      z-index:999;
    }

    否则就执行愿有的css样式。

    第二种:使用scroll-view 配合bindscroll

    wxml:
    <scroll-view style="width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun">
    <view class="title {{scrollTop > 30 ? 'topnav' : ''}}">
    </view>
    </scroll-view>
    
    wxjs:
    data: {
      scrollTop:0,
    }
      //头部固定
      scrollTopFun(e){
        let _this = this;
        let scrollTop = e.detail.scrollTop;
        _this.setData({
        scrollTop:scrollTop
     })
    
    wxss:
    /* 头部固定 */
    .topnav{
      position: fixed;
      top: 0rpx;
      left: 0;
      z-index:99;
      background: #fff;
      padding: 3%;
      width: 94%;
      z-index:999;
    }

     

    展开全文
  • true, scrollTop: e.scrollTop, }) let timer = setTimeout(() => { if (this.data.scrollTop === e.scrollTop) { this.setData({ scrollTop: e.scrollTop, }) console.log('滚动结束'); clearTimeout(timer); this...

    效果图:

     

    js

    const app = getApp()
    
    Page({
        data: {
            text: "楚河汉街, 人流如织, 武汉的春天如约而至, 如今的岁月静好, 是一群平凡人的伟大逆行换来的, 谨以此片献给为武汉拼过命的每个人!在最困难的时期, 武汉没有从天而降的英雄,只有一个个挺身而出的普通人,他们会和医护人员共同奋斗在前线。他们是厨师, 是司机, 是民警, 是教师, 是学生…他们, 是每一个用行动为武汉加油的人。信念, 具有打败一切困难的力量。胜利, 是众志成城凝聚而成的光。那些曾经未知的恐惧和伤痛的无奈,让武汉人民对生命有了更为深刻的体验,对生活有了更为奋力的追求,因此他们能在向死而生的夹缝中,保有希望的长存。凛冬已过, 疫霾散去,长江大桥车水马龙,黄鹤楼再次熠熠生辉,错过的春天, 正在归来,让我们共同期待最美四月天!"
        },
        onPageScroll: function(e) {
            debugger
            this.setData({
                shopMoveRight: true,
                scrollTop: e.scrollTop,
            })
            let timer = setTimeout(() => {
                if (this.data.scrollTop === e.scrollTop) {
                    this.setData({
                        scrollTop: e.scrollTop,
                    })
                    console.log('滚动结束');
                    clearTimeout(timer);
                    this.setData({
                        shopMoveRight: false,
                        shopMoveLeft: true
                    })
                }
            }, 500)
            this.setData({
                shopMoveLeft: false
            })
        },
    })

    wxss

    .con {
      font-size: 40rpx;
      line-height: 80rpx;
    }
    .fix.moveright {
      -webkit-animation: right 0.5s ease;
      animation: right 0.5s ease;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
    }
    @-webkit-keyframes right {
      from {
        right: 14px;
        opacity: 1;
      }
      to {
        right: -120px;
        opacity: 0.5;
      }
    }
    @keyframes right {
      from {
        right: 14px;
        opacity: 1;
      }
      to {
        right: -120px;
        opacity: 0.5;
      }
    }
    .fix.moveleft {
      -webkit-animation: left 0.5s ease;
      animation: left 0.5s ease;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
    }
    @-webkit-keyframes left {
      from {
        right: -120px;
        opacity: 0.5;
      }
      to {
        right: 14px;
        opacity: 1;
      }
    }
    @keyframes left {
      from {
        right: -120px;
        opacity: 0.5;
      }
      to {
        right: 14px;
        opacity: 1;
      }
    }
    .fix {
      position: fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 360rpx;
      height: 128rpx;
      right: 28rpx;
      bottom: 109rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 80rpx;
    }
    .fix .consul {
      text-align: center;
      line-height: 40rpx;
      font-size: 35rpx;
      color: rebeccapurple;
    }
    

    wxml

    <view class="con">{{text}}{{text}}{{text}}</view>
    <view class="fix {{shopMoveRight?'moveright':''}} {{shopMoveLeft?'moveleft':''}}">
        <view class="consul">武汉的春天已来</view>
    </view>

     

    展开全文
  • 主要为大家详细介绍了微信小程序页面上下滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • [微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式 微信小程序下拉滚动选择器picker绑定数据的两种方式 本地数据绑定和wx.request(OBJECT) json数据绑定 1.本地数据绑定 (对象数组) Page({ data:{...

    [微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式

    微信小程序下拉滚动选择器picker绑定数据的两种方式 本地数据绑定和wx.request(OBJECT) json数据绑定

    1.本地数据绑定 (对象数组)

    在这里插入图片描述

    Page({
        data:{
         //户型   这是一个本地的对象,然后绑定到页面上
        pic_array: [
          { id: 13, name: '1室1厅1卫' },
          { id: 14, name: '1室2厅1卫' },
          { id: 15, name: '2室1厅1卫' },
          { id: 16, name: '3室1厅2卫' },
          { id: 17, name: '4室1厅2卫' },
          { id: 18, name: '5室1厅3卫' },
          { id: 19, name: '6室1厅3卫' },
          { id: 20, name: '7室以上' },
        ],
         hx_index: 0;
       }, 
    
         bindPickerChange_hx: function (e) {
         console.log('picker发送选择改变,携带值为', e.detail.value);
         this.setData({   //给变量赋值
         hx_index: e.detail.value,  //每次选择了下拉列表的内容同时修改下标然后修改显示的内容,显示的内容和选择的内容一致
        })
         console.log('自定义值:', this.data.hx_select);
        },
    })
    
    <!--户型  -->
    <picker name="picker_hx" class="cybm_pic_1" value="{{pic_array[hx_index].id}}" data-selecthx="{{pic_array[hx_index].name}}" range="{{pic_array}}" range-key="{{'name'}}"  bindchange="bindPickerChange_hx"  >
    	<view class="picker" >
    		户型:  {{pic_array[hx_index].name}} //指定数组中指定下标的name键对应的值 
    	</view>
    </picker>
    
    属性名range  类型Array/Object Array  存放你的本地数据数组或者对象数组,需要加载的数据
    属性名range-key  类型String  当 range 是一个 二维Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
    属性名value  类型Array  value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始)
    属性名data-  类型自定义属性后更的属性名字可以自定义 当你需要设置其他值得时候可以使用  可选
    

    2.网络请求得到的json数据绑定下拉选择器

    首先得到后台传过来的json数据

    data:{
      
    }
    onLoad: function () {
    	var that = this;
    	wx.request({
    		url: "https://www.************",
    		data: {
    			a: ""  //参数
    		},
    		header: {
    			"Content-Type": "applicatiSon/x-www-form-urlencoded"
    		},
    		method: "POST",
    		success: function (res) {
    			that.setData({
    				pic_array: res.data.data.exp_hx,  //把json数据赋值给变量pic_array_hx
    			}) 
    		}
    	}) 
    }
    
    <!--户型  -->  //绑定的方式一样,只是改动一下变量名既可以了,这是比较简单的方式
    <picker name="picker_hx" class="cybm_pic_1" value="{{pic_array[hx_index].id}}" data-selecthx="{{pic_array[hx_index].name}}" range="{{pic_array}}" range-key="{{'name'}}"  bindchange="bindPickerChange_hx"  >
    	<view class="picker" >
    		户型:  {{pic_array[hx_index].name}} //指定数组中指定下标的name键对应的值 
    	</view>
    </picker>
    

    原文地址:http://www.cnblogs.com/mibear/p/8051370.html

    展开全文
  • 微信小程序点击滚动页面顶部 2020/07/21 wxml <view bindtap="toggle"></view> js toggle(e){ console.log(e) // 控制滚动 wx.pageScrollTo({ scrollTop: e.currentTarget.offsetTop,//e....
  • 微信小程序页面上下滚动

    万次阅读 多人点赞 2019-06-21 16:24:21
    我的页面”1 ;"> 页面2 我的页面”2 ;"> 页面3 我的页面”3 ;"> 页面4 我的页面”4 ;"> 无缝对接双创服5 我的页面”5 js Page({ data: { scroll...
  • 微信小程序页面无限滚动

    千次阅读 2019-04-29 09:55:30
    微信小程序不支持Dom, 那么要实现一个无限的滚动效果那不是蛋疼? mpvue+scroll-view实现 mpvue这个是美团开源的一个框架, 语法是和vue99%相似,但是坑很多,如果你遇到可以看下我的mpvue的其他文章,里面详细的讲...
  • 没有用过vue等MVVM的框架,直接开始做小程序,没有dom操作真是各种不适应,思维有时都转换不过来想要做的效果是 很常见的滚动条超出某个元素时,该元素固定在顶部网上看到的获取滚动条高度及返回顶部的代码...
  • 用es6语法方式写了个微信小程序小插件–数字滚动; 效果图: wxml页面布局代码: <!--pages/main/index.wxml--> <view class=num>{{num1}}{{num1Complete}} <view class=num>{{num2}}{{num2Complete}} ...
  • 微信小程序页面上下滚动、左右滑动(一) 文章目录系列文章目录前言项目结构解决问题11.pretest页面2.test页面解决问题2总结参考 前言 在上一篇文章,讲解了再微信小程序中如何实现页面上下滚动、左右滑动。但是,...
  • 因为微信小程序没有dom概念,所以不能使用锚点,也不能直接获取对应字母相对页面的偏移位置。此时只能使用小程序创建对象实例的API获取节点信息: let query = wx.createSelectorQuery().in(this); query....
  • 用es6语法方式写了个微信小程序小插件–数字滚动; 效果图: wxml页面布局代码: <!--pages/main/index.wxml--><viewclass="anima...
  • 微信小程序页面滚动scroll-view记录 微信小程序学习记录 实现功能: 使用scroll-view实现滚动部分内容在页面指定范围上下滚动。 实现结果: 目前暂无问题。 页面布局 clientBottom是计算出来的底部位置 <scroll-...
  • scroll-view 为滑动页面标签 属性: scroll-y 竖屏滚动 scrolltolower 滚动到底部事件 handleToLower 自定义方法名 enable-flex 滚动不生效 或 生效后页面错乱提示需加标签 注:这里是图片滚动加载 ,如果是整体...
  • 在需要滚动页面根节点定义一个id="page" <view id="page"> <text>需要滚到的页面</text> </view> 点击事件触发以下方法 wx.createSelectorQuery().select('#page')....
  • 微信小程序跳转当前页面div盒子
  • 主要为大家详细介绍了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序的按钮点击后滚动页面内的指定位置。 wxml内容 <view class="box1" bindtap="toComment">查看回答</view> //...其他内容 <view class="box2 text-bold" id="comment">回答</...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 785
精华内容 314
关键字:

微信小程序页面滚动

微信小程序 订阅