电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

微信小程序新手教程之怎么實現下拉刷新

瀏覽:99日期:2022-07-15 18:10:11

微信小程序新手教程之怎么實現下拉刷新,本篇默認已經成功安裝微信小程序工具,來和小編一起看看吧

如何在微信小程序里面實現下拉刷新,上拉加載更多

先看一下界面

微信小程序新手教程之怎么實現下拉刷新

微信小程序新手教程之怎么實現下拉刷新

大致如此的界面吧。 這個Demo使用了微信的幾個Api和事件,我先列出來。

1.wx.request (獲取遠程服務器的數據,可以理解成$.ajax)

2. scroll-view的兩個事件

2.1 bindscrolltolower(滑到頁面底部時)

2.2 bindscroll (頁面滑動時)

2.3 bindscrolltoupper (滑倒頁面頂部時)

然后我們看代碼,詳細描述。

index.js

#FormatImgID_2#

var url = "http://www.imooc.com/course/ajaxlist";var page =0;var page_size = 20;var sort = "last";var is_easy = 0;var lange_id = 0;var pos_id = 0;var unlearn = 0;// 獲取數據的方法,具體怎么獲取列表數據大家自行發揮var GetList = function(that){ that.setData({ hidden:false }); wx.request({ url:url, data:{ page : page, page_size : page_size, sort : sort, is_easy : is_easy, lange_id : lange_id, pos_id : pos_id, unlearn : unlearn }, success:function(res){ //console.info(that.data.list); var list = that.data.list; for(var i = 0; i < res.data.list.length; i++){ list.push(res.data.list[i]); } that.setData({ list : list }); page ++; that.setData({ hidden:true }); } }); } Page({ data:{ hidden:true, list:[], scrollTop : 0, scrollHeight:0 }, onLoad:function(){ // 這里要非常注意,微信的scroll-view必須要設置高度才能監聽滾動事件,所以,需要在頁面的onLoad事件中給scroll-view的高度賦值 var that = this; wx.getSystemInfo({ success:function(res){ console.info(res.windowHeight); that.setData({ scrollHeight:res.windowHeight }); } }); }, onShow:function(){ // 在頁面展示之后先獲取一次數據 var that = this; GetList(that); }, bindDownLoad:function(){ // 該方法綁定了頁面滑動到底部的事件 var that = this; GetList(that); }, scroll:function(event){ // 該方法綁定了頁面滾動時的事件,我這里記錄了當前的position.y的值,為了請求數據之后把頁面定位到這里來。 this.setData({ scrollTop : event.detail.scrollTop }); }, refresh:function(event){ // 該方法綁定了頁面滑動到頂部的事件,然后做上拉刷新 page = 0; this.setData({ list : [], scrollTop : 0 }); GetList(this) } })

index.wxml

<view class="container"> <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh"> <view class="item" wx:for="{{list}}"> <image class="img" src="{{item.pic_url}}"></image> <view class="text"> <text class="title">{{item.name}}</text> <text class="description">{{item.short_description}}</text> </view> </view> </scroll-view> <view class="body-view"> <loading hidden="{{hidden}}" bindchange="loadingChange"> 加載中...</loading> </view></view>

下面小編就給大家介紹一種一個小程序吧

嗨圖功能

微信小程序新手教程之怎么實現下拉刷新

1、專題——DIY圖片的模板,點擊可以生成使用,分享到朋友圈。

2、分享墻——用戶上傳的自己DIY作品。

3、立即制作——可以用自己的圖來DIY。

4、告訴我——告訴產品的改進,內容的增加。

想要體驗怎么制作屬于自己個性朋友圈照片的用戶,掃一掃下面的二維碼就可以啦!還等什么,趕緊掃碼體驗,開啟你的嗨圖之旅吧!

微信小程序新手教程之怎么實現下拉刷新
標簽: 微信
相關文章:
主站蜘蛛池模板: 真空包装机-诸城市坤泰食品机械有限公司 | ERP企业管理系统永久免费版_在线ERP系统_OA办公_云版软件官网 | 首页|成都尚玖保洁_家政保洁_开荒保洁_成都保洁| 周易算网-八字测算网 - 周易算网-宝宝起名取名测名字周易八字测算网 | 聚合氯化铝厂家-聚合氯化铝铁价格-河南洁康环保科技 | 棉柔巾代加工_洗脸巾oem_一次性毛巾_浴巾生产厂家-杭州禾壹卫品科技有限公司 | 蓝莓施肥机,智能施肥机,自动施肥机,水肥一体化项目,水肥一体机厂家,小型施肥机,圣大节水,滴灌施工方案,山东圣大节水科技有限公司官网17864474793 | 北京模型公司-工业模型-地产模型-施工模型-北京渝峰时代沙盘模型制作公司 | pbt头梳丝_牙刷丝_尼龙毛刷丝_PP塑料纤维合成毛丝定制厂_广州明旺 | 上海办公室装修公司_办公室设计_直营办公装修-羚志悦装 | 酒精检测棒,数显温湿度计,酒安酒精测试仪,酒精检测仪,呼气式酒精检测仪-郑州欧诺仪器有限公司 | 100_150_200_250_300_350_400公斤压力空气压缩机-舰艇航天配套厂家 | 河南mpp电力管_mpp电力管生产厂家_mpp电力电缆保护管价格 - 河南晨翀实业 | 制氮设备-变压吸附制氮设备-制氧设备-杭州聚贤气体设备制造有限公司 | 高低温万能试验机_拉力试验机_拉伸试验机-馥勒仪器科技(上海)有限公司 | 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 深圳展厅设计_企业展馆设计_展厅设计公司_数字展厅设计_深圳百艺堂 | 通信天线厂家_室分八木天线_对数周期天线_天线加工厂_林创天线源头厂家 | 电销卡 防封电销卡 不封号电销卡 电话销售卡 白名单电销卡 电销系统 外呼系统 | 儿童语言障碍训练-武汉优佳加感统文化发展有限公司 | 带锯机|木工带锯机圆木推台锯|跑车带锯机|河北茂业机械制造有限公司| | 新车测评网_网罗汽车评测资讯_汽车评测门户报道 | Magnescale探规,Magnescale磁栅尺,Magnescale传感器,Magnescale测厚仪,Mitutoyo光栅尺,笔式位移传感器-苏州连达精密量仪有限公司 | 广东教师资格网-广东教师资格证考试网 | 土壤养分检测仪_肥料养分检测仪_土壤水分检测仪-山东莱恩德仪器 大型多片锯,圆木多片锯,方木多片锯,板材多片锯-祥富机械有限公司 | 石栏杆_青石栏杆_汉白玉栏杆_花岗岩栏杆 - 【石雕之乡】点石石雕石材厂 | 电动不锈钢套筒阀-球面偏置气动钟阀-三通换向阀止回阀-永嘉鸿宇阀门有限公司 | 黑龙江京科脑康医院-哈尔滨精神病医院哪家好_哈尔滨精神科医院排名_黑龙江精神心理病专科医院 | 不锈钢轴流风机,不锈钢电机-许昌光维防爆电机有限公司(原许昌光维特种电机技术有限公司) | 空气能暖气片,暖气片厂家,山东暖气片,临沂暖气片-临沂永超暖通设备有限公司 | 艺术涂料_进口艺术涂料_艺术涂料加盟_艺术涂料十大品牌 -英国蒙太奇艺术涂料 | 污泥烘干机-低温干化机-工业污泥烘干设备厂家-焦作市真节能环保设备科技有限公司 | 防渗膜厂家|养殖防渗膜|水产养殖防渗膜-泰安佳路通工程材料有限公司 | PO膜_灌浆膜及地膜供应厂家 - 青州市鲁谊塑料厂 | sfp光模块,高速万兆光模块工厂-性价比更高的光纤模块制造商-武汉恒泰通 | 地磅-地秤-江阴/无锡地磅-江阴天亿计量设备有限公司_ | 蒸汽热收缩机_蒸汽发生器_塑封机_包膜机_封切收缩机_热收缩包装机_真空机_全自动打包机_捆扎机_封箱机-东莞市中堡智能科技有限公司 | 螺杆式冷水机-低温冷水机厂家-冷冻机-风冷式-水冷式冷水机-上海祝松机械有限公司 | 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 - 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 | 电子万能试验机_液压拉力试验机_冲击疲劳试验机_材料试验机厂家-济南众标仪器设备有限公司 | 济南侦探调查-济南调查取证-山东私家侦探-山东白豹调查咨询公司 密集架|电动密集架|移动密集架|黑龙江档案密集架-大量现货厂家销售 |