精华内容
下载资源
问答
  • 微信小程序下拉刷新/上拉加载更多

    万次阅读 多人点赞 2017-12-19 09:37:50
    小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效; 看一下json文件 "enablePullDownRefresh": true, 注意这里的true是...

    查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉到达最底部,

    在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效;

    看一下json文件

     

    "enablePullDownRefresh": true,


    注意这里的true是布尔型而不是字符;

     

    有同学说设置完之后可以下拉,但是看不到图标;

    在app.json中这样设置;

    这样下拉之后就可以看到了;

    每个页面生成的时候已经默认为我们设置了前面提到的onPullDownRefresh函数和onReachBottom函数

    直接上代码:

    page为全局变量,用在在后面的加载请求,这里要和编写数据接口的同事讨论好请求;

     

     // 下拉刷新
      onPullDownRefresh: function () {
        // 显示顶部刷新图标
        wx.showNavigationBarLoading();
        var that = this;
        wx.request({
          url: 'https://xxx/?page=0',
          method: "GET",
          header: {
            'content-type': 'application/text'
          },
          success: function (res) {
            that.setData({
              moment: res.data.data
            });
            console.log(that.data.moment);
            // 隐藏导航栏加载框
            wx.hideNavigationBarLoading();
            // 停止下拉动作
            wx.stopPullDownRefresh();
          }
        })
      },

     

    上拉加载更多:

     

     

    /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        var that = this;
        // 显示加载图标
        wx.showLoading({
          title: '玩命加载中',
        })
        // 页数+1
        page = page + 1;
        wx.request({
          url: 'https://xxx/?page=' + page,
          method: "GET",
          // 请求头部
          header: {
            'content-type': 'application/text'
          },
          success: function (res) {
            // 回调函数
            var moment_list = that.data.moment;
            const oldData = that.data.moment;
            that.setData({
               moment:oldData.concat(res.data.data)
            })
            // 隐藏加载框
            wx.hideLoading();
          }
        })
    
      },

    完成。

    推荐一下自己的小程序 有兴趣可以交流

     



     

     

    展开全文
  • 主要介绍了微信小程序 下拉菜单的实现的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序 下拉菜单简单实例的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序下拉刷新界面的实现的相关资料,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下
  • 主要介绍了微信小程序 下拉列表的实现实例代码的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序下拉菜单效果的实例代码,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要给大家介绍了关于微信小程序下拉刷新PullDownRefresh的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • [微信小程序] 微信小程序下拉滚动选择器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-11-25 08:31:22
    微信小程序下拉刷新功能 微信小程序下拉刷新 微信小程序自带下拉刷新的方法,如果在js中自己编写方法的话,需要将自带的方法删掉。 实现方法如下: js 文件 //下拉刷新 onPullDownRefresh: function () { this....

    微信小程序下拉刷新功能

    微信小程序下拉刷新

    微信小程序自带下拉刷新的方法,如果在js中自己编写方法的话,需要将自带的方法删掉。
    实现方法如下:
    js 文件

    //下拉刷新
      onPullDownRefresh: function () {
        this.onLoad()
      },
    

    json 文件

    "enablePullDownRefresh": true,
    

    在这里插入图片描述

    下拉刷新可能会受到自定义组件的影响,我之前在用的时候就收到了其他组件的影响,导致页面不能下拉刷新。
    展开全文
  • 主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序下拉菜单

    2020-01-29 15:51:55
    微信小程序下拉菜单

    微信小程序下拉菜单

    展开全文
  • 微信小程序下拉菜单实例

    千次阅读 2017-09-04 14:45:44
    http://www.51xuediannao.com/xiaochengxu/1012112H016.html 当前位置:懒人建站 > 微信小程序开发 > ...微信小程序下拉菜单实例 ...微信小程序下拉菜单实例,小程序的尝鲜制作,开发工具是
  • 微信小程序下拉筛选菜单

    千次阅读 2019-07-29 19:21:02
    微信小程序下拉筛选菜单 最近在做一个社交商城的微信小程序项目,碰到下拉筛选菜单,按自己的想法写了一个,写的不好忘各位大佬指教,哈哈~ ps:因为后端还没有数据所以筛选功能还没做,但是基本功能实现后做筛选也很...
  • 主要介绍了微信小程序下拉加载和上拉刷新两种实现方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序 下拉刷新

    千次阅读 2017-02-18 11:30:46
    微信小程序 下拉刷新功能。
  • 微信小程序下拉刷新(1)

    千次阅读 2020-06-24 22:32:33
    微信小程序下拉刷新 1.官方提供的api 2.示例代码 wx.startPullDownRefresh() 3.实例 4.注:该下拉刷新只对手机端有效
  • 微信小程序下拉刷新问题  ​ ​ ​ ​ ​ ​ ​我们主要来说一下微信小程序的下拉刷新问题,这个问题也是我自己碰见的问题,问题比较二,但是又很恶心,所以在这里给大家分享...
  • 微信小程序下拉滚动选择器picker绑定数据的两种方式 本地数据绑定和wx.request(OBJECT) json数据绑定 (此图片来源于网络,如有侵权,请联系删除! ) 1.本地数据绑定 (对象数组) Page({ data:{ //户型 这是一个...
  • 微信小程序下拉刷新,上拉加载 我们在开发微信小程序的时候经常会遇到页面下拉刷新,上拉加载更多的开发需求,那么今天就来给大家详解一下微信小程序的下拉刷新,上拉加载需求。 上拉加载更多 上拉加载更多的内在...
  • 是当微信小程序下拉刷新功能不符合场景、或者不适用时候的替代方案。提供了类似手机端chrome浏览器的下拉刷新效果(当然没有那么酷炫)。 支持场景 scroll-view swiper中嵌套使用scroll-view 使用了自定义顶导...
  • 自定义微信小程序下拉选择框组件

    万次阅读 2018-09-21 21:54:45
    自定义微信小程序下拉选择框组件如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能...
  • 微信小程序下拉刷新 /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { //0.5s加载显示,如果不加会一直显示加载中,造成不好的用户体验 var that = this wx....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,505
精华内容 7,002
关键字:

微信小程序下拉

微信小程序 订阅