찾다
위챗 애플릿미니 프로그램 개발미니 프로그램에서 풀다운 새로 고침을 구현하고 더 많은 효과를 로드하는 방법에 대한 간략한 설명
미니 프로그램에서 풀다운 새로 고침을 구현하고 더 많은 효과를 로드하는 방법에 대한 간략한 설명Jun 30, 2021 am 11:33 AM
아래로 당겨 새로고침하세요.더 로드하세요미니 프로그램위챗

이 글에서는 WeChat 미니 프로그램에서 풀다운을 통해 더 많은 효과를 로드할 수 있는 몇 가지 방법을 소개합니다. 거의 모든 앱에는 풀다운 새로 고침 및 더 많은 효과를 로드할 수 있는 기능이 있습니다.

미니 프로그램에서 풀다운 새로 고침을 구현하고 더 많은 효과를 로드하는 방법에 대한 간략한 설명

[관련 학습 권장 사항: 미니 프로그램 개발 튜토리얼]

## 풀다운 새로 고침

현재 풀다운 새로 고침을 구현하는 방법에는 두 가지가 있습니다

1. 시스템 풀다운 새로 고침 API 인터페이스에서 제공하는 시스템 API

미니 프로그램에서 풀다운 새로 고침을 구현하고 더 많은 효과를 로드하는 방법에 대한 간략한 설명

2. 스크롤 보기를 모니터링하고 풀다운 새로 고침을 사용자 정의합니다. 스크롤 보기에 bindscrolltoupper 속성이 있다는 것을 기억하시나요? 잊어버리셨다면 이전글 위챗 미니프로그램 실무편 - 전자상거래를 참고해주세요. (2) 상/좌로 스크롤 시 스크롤투퍼 이벤트가 발생하므로 이 속성을 활용하여 풀다운 새로고침 기능을 구현할 수 있습니다. .

두 가지 방법을 모두 사용할 수 있습니다. 첫 번째 방법은 비교적 간단하고 사용하기 쉽습니다. 두 번째 방법은 풀다운 새로 고침 스타일을 사용자 정의하려는 소규모 프로그램에 적합합니다. 전자상거래에 대해 설명하겠습니다. 시스템에서 제공하는 첫 번째 것을 사용하세요. 주요 목적은 모든 사람에게 사용법을 가르치는 것입니다. 홈페이지를 예로 들어보세요

1. Home.json 매개변수 구성

"enablePullDownRefresh": true

새로고침을 위해 내려야 하는 페이지는 해당 페이지에 해당하는 xxx.json 파일에서 위 속성을 구성하면 됩니다. 속성을 사용하면 풀다운하여 새로 고침이 허용되는지 여부도 알 수 있습니다. 물론 풀다운 새로 고침을 허용하도록 각 구성을 구성하지 않으려면 전역 변수 앱 창에서 위 속성을 직접 구성하면 됩니다. .json, 전체 프로젝트에서 풀다운 새로 고침을 허용하려면 시스템 기본값이 풀다운 새로 고침 기능이 있는 home.js

  //下拉刷新
  onPullDownRefresh:function()
  {
    wx.showNavigationBarLoading() //在标题栏中显示加载
    
    //模拟加载
    setTimeout(function()
    {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    },1500);
  },

미니 프로그램에서 풀다운 새로 고침을 구현하고 더 많은 효과를 로드하는 방법에 대한 간략한 설명

onPullDownRefresh

이 아니기 때문에 추가해야 합니다. 새로 고침 이벤트 모니터링을 진행하고 내부 코드 wx.showNavigationBarLoading() 및 wx.hideNavigationBarLoading()을 자세히 살펴보세요. 이 두 문장은 네트워크 요청을 설명하지 않았기 때문에 작은 국화의 표시 및 숨기기를 제어하는 ​​데 사용됩니다. 아직은 네트워크 로딩을 시뮬레이션했고, setTimeout 메소드를 통해 시간 지연 메소드를 작성했습니다. 이 메소드는 네트워크 로딩에 소요되는 시간을 시뮬레이션할 수 있으며, 또한 네트워크 로딩이 완료되면 wx.stopPullDownRefresh()도 있습니다. 풀다운 새로 고침을 중지합니다. 이번 풀다운 새로고침 기능은 완성됐는데 아직 완벽하진 않네요. 풀다운 새로고침에 애니메이션이 없는게 아직 좀 이상하네요~ 저도 놀랐습니다. 당시 WeChat의 풀다운 새로 고침 패키지가 어떻게 이럴 수 있었습니까? 자, 나중에 다른 사람들이 작성한 코드를 참조하고 구멍을 메운 후 효과를 살펴 보겠습니다. 이 애니메이션을 어떻게 추가했는지 알고 싶습니다. 실제로는 매우 간단합니다. 창에서 다음 속성을 구성하려면 한 문장만 있으면 됩니다. app.json 전체 시스템의 배경색을 설정하기 위한 것입니다. 시스템 색상을 설정하면 풀다운 새로고침이 나타나는 이유는 무엇인가요? 배경색을 설정하지 않아서 시스템이 흰색으로 설정되어 있고, 애니메이션도 흰색이어서 애니메이션 효과를 볼 수 없군요 ㅎㅎ~~

"backgroundColor": "#f0145a"

# #더보기

미니 프로그램에서 풀다운 새로 고침을 구현하고 더 많은 효과를 로드하는 방법에 대한 간략한 설명
더 로드하는 방법은 두 가지가 있습니다

시스템 API를 호출

    스크롤 뷰를 듣고,
  • bindscrolltolower

    모니터 아래로 스와이프

  • 그래도 받아들입니다. 첫 번째 구현 방법은 풀다운 새로고침과 처리방법이 조금 다르지만 홈페이지를 예로 들어보겠습니다1, home.js

      //加载更多
      onReachBottom: function () {
        console.log('加载更多')
        setTimeout(() => {
          this.setData({
            isHideLoadMore: true,
            recommends: [
              {
                goodId: 7,
                name: 'OLAY玉兰油精油沐浴露玫瑰滋养二合一450ml',
                url: 'bill',
                imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161213/148162245074.jpg',
                newprice: "¥36.60",
                oldprice: "¥40.00",
              },
              {
                goodId: 10,
                name: '兰蔻玫瑰清滢保湿柔肤水嫩肤水化妆水400ml补水保湿温和不刺激',
                url: 'bill',
                imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057937593.jpg',
                newprice: "¥30.00",
                oldprice: "¥80.00",
              }, {
                goodId: 11,
                name: 'Lancome/兰蔻清莹柔肤爽肤水/粉水400ml补水保湿玫瑰水化妆水',
                url: 'bill',
                imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
                newprice: "¥30.00",
                oldprice: "¥80.00",
              },
              {
                goodId: 12,
                name: '美国CLINIQUE倩碧黄油无油/特效润肤露125ml',
                url: 'bill',
                imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
                newprice: "¥239.00",
                oldprice: "¥320.00",
              },
              {
                goodId: 13,
                name: '法国LANCOME兰蔻柔皙轻透隔离防晒乳霜50ML2017年3月到期',
                url: 'bill',
                imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058014894.jpg',
                newprice: "¥130.00",
                oldprice: "¥180.00",
              },
            ],
          })
        }, 1000)
      }
onReachBottom

시스템에서 제공하는 하단 이벤트 모니터링과 드롭다운 새로 고침과 마찬가지로 일부 데이터를 시뮬레이션하고 시간 지연 이벤트인 isHideLoadMore를 추가하여 로딩 컨트롤의 표시 및 숨기기를 제어합니다

2. Home.wxml

 <view class="weui-loadmore" hidden="{{isHideLoadMore}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加载</view>
  </view>
에 추가합니다. home.wxml 하단 위 코드는 더 많은 컨트롤을 로드하는 것입니다. 더 많은 혜택을 로드하는 것은 아래로 당겨서 새로 고치는 것만큼 좋지 않습니다. 시스템에서는 더 많은 컨트롤을 로드하는 애니메이션을 제공하지 않으므로 직접 만들어야 합니다.
3 .wxss

/*  加载更多   */
.weui-loading {
  margin: 0 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
  animation: weuiLoading 1s steps(12, end) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  background-size: 100%;
}
.weui-loadmore {
  width: 65%;
  margin: 1.5em auto;
  line-height: 1.6em;
  font-size: 14px;
  text-align: center;
}
.weui-loadmore__tips {
  display: inline-block;
  vertical-align: middle;
}

이것은 우리의 맞춤형 스타일입니다. 스타일은 매우 간단합니다. 여기서 설명하고 싶은 것은 weui-loading 스타일인

data:image/svg+입니다. xml;base64

이게 무슨 뜻인가요? 우리는 배경을 직접 추가하는 방법을 사용했습니다. 이 그림은 base64 형식이며 svg로 직접 그릴 수도 있습니다. URL에 사진 경로를 입력하세요. 효과를 함께 살펴보겠습니다.

미니 프로그램에서 풀다운 새로 고침을 구현하고 더 많은 효과를 로드하는 방법에 대한 간략한 설명

##Summary

오늘은 여기까지입니다. 새로 고치고 더 로드하는 풀다운은 프런트엔드 프로그램에 대한 필수 지식이므로 모두 새로 고치고 로드할 수 있습니다. , 여기서 주요 설명은 미니 프로그램과 함께 제공되는 풀다운 새로 고침 및 더 많은 API를 로드하는 것입니다. 두 번째 방법에 도전하여 구현해 보세요~

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 프로그래밍 영상! !

위 내용은 미니 프로그램에서 풀다운 새로 고침을 구현하고 더 많은 효과를 로드하는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 csdn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
微信文件多久过期微信文件多久过期Nov 21, 2022 pm 02:12 PM

微信文件的过期时间需要根据情况来判断:1、如果发送的文件没有打开过,则在72小时以后微信系统会自动清理掉,即过了三天文件就会过期;2、如果已经查看了微信文件,但是并没有下载(当然已经下载的文件也是一样的),那么文件是可以保留180天的,在这180天以内随时都可以去下载。

微信拉黑和删除有什么区别微信拉黑和删除有什么区别Oct 18, 2022 am 11:29 AM

区别:1、拉黑后对话框从主页消失,但是聊天记录还在;删除后聊天记录全部消失不见了。2、拉黑后还能发给他,但是收不到他的消息;删除后不能发信息了。3、拉黑后双方都不可见彼此的朋友圈;删除对方以后,你看不到对方的朋友圈了,对方是否能看到你的,取决于设置(允许陌生人查看十张照片)与否,如果设置则可以看到朋友圈。

支持微信付款的购物平台有哪些支持微信付款的购物平台有哪些Nov 02, 2022 pm 02:44 PM

支持微信付款的购物平台有:1、京东,是中国的综合网络零售商;2、唯品会,是一家在线销售品牌折扣商品的互联网公司;3、拼多多,是社交新电商领导者,更懂消费者的购物平台;4、京喜,是京东旗下生活消费商城;5、蘑菇街,一个电子商务网站;6、聚美优品,是一家以销售化妆品为主的时尚购物网站;7、微店,是一个云推广电子商务平台;8、考拉海购,是一个跨境海淘业务为主的会员电商平台。

微信怎么查看ip地址微信怎么查看ip地址May 31, 2023 am 09:16 AM

微信查看ip地址的方法:1、登录电脑版微信,右键点击屏幕下方的任务栏,点击“任务管理器”;2、弹出任务管理器时,点击左下角的“详细信息”;3、任务管理器进入“性能”选项,点击“打开资源监视器”;4、选择“网络”,勾选微信进程“Wechat.exe”;5、点击下面的“TCP连接”即可监视微信网络IP相关情况,发送消息得到回复就会显示他人的IP地址。

微信可以绑别人的银行卡号么微信可以绑别人的银行卡号么Mar 14, 2023 pm 04:53 PM

可以。未经过实名认证的微信号,可以绑定他人的银行卡,但在绑定过程中需要提供银行卡的开户人姓名、开户行地址、开户时预留的联系方式及银行卡支付密码;已通过实名认证的微信号,无法绑定他人银行卡,只能添加使用自己身份证办理的银行卡。

一个身份证只能绑定一个微信吗一个身份证只能绑定一个微信吗Mar 02, 2023 pm 01:50 PM

不是,一个身份证能绑定5个微信。按照微信当前规定,一个身份证可以实名认证5个微信号;如果已经实名认证了5个微信账号,但是还想要继续实名,就要把已经实名认证的一些不用的微信号清除以后,才可以再实名认证新的微信号。

闲鱼支持微信支付吗闲鱼支持微信支付吗Nov 07, 2022 pm 03:31 PM

闲鱼是不支持微信支付的,仅支持使用支付宝进行付款;闲鱼是阿里巴巴旗下闲置交易平台App客户端,会员只要使用淘宝或支付宝账户登录,无需经过复杂的开店流程,即可达成包括一键转卖个人淘宝账号中“已买到宝贝”、自主手机拍照上传二手闲置物品、以及在线交易等诸多功能。

微信赞赏码和收款码的区别是什么微信赞赏码和收款码的区别是什么Oct 31, 2022 pm 03:18 PM

区别:1、赞赏码是用于别人给自己打赏的,收取小费等小金额的赞赏给予,而收款码是一般的收款行为,可以进行大额收费的二维码;2、收款码是随时会变的,如果不是商家收款码,每次打开都会变,但是赞赏码不同,赞赏码是不会变的;3、赞赏码只能进行小额的首款,而收款码将可以大额首款。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전