コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ WeChat アプレット WeChatの開発 スクロールビューがリストページを完成させる方法の詳細な説明

スクロールビューがリストページを完成させる方法の詳細な説明

Y2J
Y2J
May 14, 2018 am 09:12 AM
WeChat アプレット

この記事では主に、リストページを実装するための WeChat アプレットのスクロールビューコンポーネントのサンプルコードに関する関連情報を紹介します。 スクロールビューコンポーネントの紹介 スクロールビューは、WeChat アプレットによって提供されるスクロール可能なビューコンポーネントです。主な機能は、携帯電話でよく見られるプルアップ読み込みです。必要な場合は、スクロールビューコンポーネントの紹介を参照してください

スクロールビューは、WeChatアプレットによって提供されるスクロール可能なビューコンポーネントです。携帯電話でよく見るリスト ページをプルアップして読み込み、プルダウンしてこの コンポーネントの使用法を説明します

!アプリにまず、アプレット用の新しいページをインポートし、プロジェクトのルート ディレクトリでアプリを開く必要があります。

json

このプロジェクト

設定ファイル

「pages/allJoke/allJoke」をページ配列に追加します次に、「tabBar」のリスト項目(「list」)の下部にnavigationを追加します: 

 {
   "text": "列表",
   "pagePath": "pages/allJoke/allJoke",
   "iconPath": "images/note.png",
   "selectedIconPath": "images/noteHL.png"
  },
ログイン後にコピー
特定の構成の意味を知りたい場合は、ミニプログラム構成ドキュメントを参照してください。ここでは説明しません!

json 構成ページ

次のステップは、新しいページ構成ページを作成します。ページ ディレクトリの下に alljoke などの新しいディレクトリを作成し、その下に新しい allJoke.json を作成します。次のコードをこのファイルにコピーします: 

{
  "navigationBarTitleText": "笑话集锦",
  "enablePullDownRefresh": true
}
ログイン後にコピー
ミニ プログラムによって提供される onPullDownRefresh メソッドが必要になるため、別のオプションを設定項目でオンにする必要があります。ページのトップ タイトル。任意に設定するかどうかを設定できます。

wxml ビュー ページ

次に、ビュー ページの番です。これは、alljoke ディレクトリに新しい alljoke.wxml ページを作成する場合にも当てはまります。ミニ プログラムによって作成されたビュー ページ ドキュメント タイプ。その記述方法は html に似ています。詳細を知りたい場合は、次のコードをコピーしてください。 alljoke.wxml にアクセスしてください 

<view>
 <view>
  <scroll-view class="scroll" scroll-top="{{scrollTop}}" style="height:580px;" scroll-y="true" bindscroll="scrll"  bindscrolltolower="loadMore">
   <view class="block" wx:for="{{listLi}}" wx:for-item="item">
    <text>{{item.text}}</text>
   </view>  
  </scroll-view>
 </view>
 <view class="top" hidden="{{hidden}}" catchtap="goTop">⇧</view>
</view>
ログイン後にコピー
ご覧のとおり、主人公のスクロールビューもここに堂々と登場しています。ここでは、構成の長いリストを紹介します

設定項目機能scroll-top 垂直スクロールバーの位置を設定します。設定値が変更されない場合、コンポーネントはレンダリングされないことに注意してください!垂直スクロールを許可するスクロール時にコールバック関数がトリガーされる下までスクロールがトリガーされるevent
scroll-y
bindscroll
bindsrollto lower

用到的选项都列出来了,还有一点需要大家特别注意的:

使用竖向滚动条时必须为组件设置一个固定高度就是上面代码style里面设置的高!切记切记!

更多资料请阅读微信小程序scroll-view组件文档

wxss样式

同样在alljoke目录下面新建allJoke.wxss文件,小程序的样式和传统css差不多大家可以根据自己喜好自行设计,这里我简单做了一下样式比较丑大家将就着用吧.(题外话:受不了的自己动手丰衣足食)

.block {
  border: 8px solid #71b471;
  margin: 20rpx 20rpx;
  padding: 10rpx;
  background-color: #fff;
  border-radius: 20rpx;
  text-align: center;
}
.top {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #fff;
  position: fixed;
  bottom: 40rpx;
  right: 20rpx;
  text-align: center;
  font-size: 50rpx;
  opacity: .8;
  border-radius: 50%;
  border: 1px solid #fff; 
}
ログイン後にコピー

小程序文档中关于样式的介绍

逻辑部分

来到最后也是最重要的逻辑部分了!老规矩alljoke目录下新建allJoke.js文件,先贴代码再慢慢讲解:

Page({
 data:{
  listLi:[],
  page:1,
  scrollTop:0,
  done: false,
  hidden: true
 },
 onLoad:function(options){
  this.getList(1);
 },

 onPullDownRefresh: function(){
  wx.showToast({
   title: &#39;加载中&#39;,
   icon: &#39;loading&#39;
  });
  this.getList(1,true);
 },

 getList: function(page, stopPull){
  var that = this
  wx.request({
   url: &#39;https://wechat.sparklog.com/jokes&#39;,
   data: {
    page: page,
    per: &#39;20&#39;
   },
   method: &#39;GET&#39;, 
   success: function(res){
    if(page===1){
     that.setData({
      page: page+1,
      listLi: res.data,
      done: false
     })
     if(stopPull){
      wx.stopPullDownRefresh()      
     }
    }else{
     if(res.data<20){
      that.setData({
       page: page+1,
       listLi: that.data.listLi.concat(res.data),
       done: true
      }) 
     }else{
      that.setData({
       page: page+1,
       listLi: that.data.listLi.concat(res.data)
      }) 
     }  
    }
   },
  })
 },

 loadMore: function(){
  var done = this.data.done;
  if(done){
   return
  }else{
   wx.showToast({
    title: &#39;加载中&#39;,
    icon: &#39;loading&#39;,
    duration: 500
   });
   var page = this.data.page;
   this.getList(page)
  }
 },

 scrll: function(e){
  var scrollTop = e.detail.scrollTop
  if(scrollTop>600){
   this.setData({
    scrollTop: 1,
    hidden: false    
   })
  }else{
   this.setData({
    scrollTop: 1,
    hidden: true  
   });
  }
 },

 goTop: function(){
  this.setData({
   scrollTop:0,
   hidden: true 
  })
 }
})
ログイン後にコピー

大家可以看到首先我们需要用page()函数注册页面,然后在data里面定义一些初始化数据.onLoad是这个页面的生命周期函数,页面加载时会调用到它.我们在页面加载时调用了自定义的getList函数.这个函数接收两个参数,第一个参数是要加载的页面,第二个参数是布尔值,用来判断是下拉刷新调用的这个函数,还是页面加载时调用的这个函数!接下来onPullDownRefresh是小程序提供的下拉刷新函数,里面wx.showToast显示消息提示框,用来提示用户正在加载,loadMore是滚动到底部触发的事件.函数里面会检查是否已经加载了全部列表项,如果已经加载了全部列表项会return掉,如果数据库还有列表项,上拉到底部加载下一页!scrll函数是滚动时触发的函数,可以看到这个函数会判断滚动条位置是否大于六百,如果大于六百显示点击直达底部的按钮,如果小于六百隐藏直达顶部的按钮.同时会更新滚动条位置的参数.刚刚在讲wxml时已经讲过scroll-view组件设置竖向滚动条位置scroll-top设置项时如果参数一样,页面不会重新渲染,我们就是利用了这一点,如果要到达顶部,位置必定是'0',滚动时触发scrll函数,我们把位置信息设置为'1',因为滚动函数会反复触发,所以此时页面是不会渲染的.也就是说由于位置设置参数都是设置为'1'不变,导致scroll-top设置项不会生效为goTop函数的直达顶部(把参数变为'0'提供机会).最后就是直达顶部按钮的函数了,可以看到它是把位置信息变为'0',参数变化scroll-top设置生效,页面直达顶部.最后再通过改变hidden这个参数把自己(直达顶部按钮)给隐藏掉了!

结尾

ok,通过上面的步骤我们终于实现了下拉刷新上拉加载的列表页功能了,从上面我们可以看到微信提供的接口和api还是挺全面的,要实现一个功能总体来说要比原生js实现要简单一些!

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 微信公众号平台源码下载

3. 阿狸子订单系统源码下载

以上がスクロールビューがリストページを完成させる方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホット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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション
4週間前 By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
3週間前 By DDD
Atomfallのクレーンコントロールキーカードを見つける場所
4週間前 By DDD
<🎜>：Dead Rails-すべての課題を完了する方法
1 か月前 By DDD
Atomfall Guide：アイテムの場所、クエストガイド、およびヒント
1 か月前 By DDD
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7711
15
Java チュートリアル
1640
14
CakePHP チュートリアル
1394
52
Laravel チュートリアル
1288
25
PHP チュートリアル
1232
29
もっと見る
Related knowledge
Xianyu WeChat ミニプログラムが正式に開始 Xianyu WeChat ミニプログラムが正式に開始 Feb 10, 2024 pm 10:39 PM

Xianyu の公式 WeChat ミニ プログラムが静かに開始されました。ミニ プログラムでは、プライベート メッセージを投稿して購入者/販売者とコミュニケーションしたり、個人情報や注文を表示したり、商品を検索したりすることができます。プログラム、見てみましょう。 Xianyu WeChat アプレットの名前は何ですか? 回答: Xianyu、アイドル取引、中古品販売、評価、リサイクル。 1. ミニ プログラムでは、アイドル メッセージの投稿、プライベート メッセージを介した購入者/販売者とのコミュニケーション、個人情報と注文の表示、指定された商品の検索などができます。 2. ミニ プログラム ページには、ホームページ、近くに、アイドル投稿、メッセージ投稿、私の投稿 5つの機能; 3. 使用したい場合は、購入する前に WeChat 支払いを有効にする必要があります。

WeChatアプレットは画像アップロード機能を実装 WeChatアプレットは画像アップロード機能を実装 Nov 21, 2023 am 09:08 AM

WeChat アプレットが画像アップロード機能を実装 モバイル インターネットの発展に伴い、WeChat アプレットは人々の生活に欠かせないものになりました。 WeChat ミニ プログラムは、豊富なアプリケーション シナリオを提供するだけでなく、画像アップロード機能などの開発者定義の機能もサポートします。この記事では、WeChat アプレットに画像アップロード機能を実装する方法と具体的なコード例を紹介します。 1. 準備作業 コードを書き始める前に、WeChat 開発者ツールをダウンロードしてインストールし、WeChat 開発者として登録する必要があります。同時に、WeChat についても理解する必要があります。

WeChat アプレットにドロップダウン メニュー効果を実装する WeChat アプレットにドロップダウン メニュー効果を実装する Nov 21, 2023 pm 03:03 PM

WeChat ミニ プログラムでドロップダウン メニュー効果を実装するには、特定のコード サンプルが必要です。モバイル インターネットの普及に伴い、WeChat ミニ プログラムはインターネット開発の重要な部分となり、ますます多くの人が注目し始めています。 WeChat ミニ プログラムを使用します。 WeChat ミニ プログラムの開発は、従来の APP 開発よりも簡単かつ迅速ですが、特定の開発スキルを習得する必要もあります。 WeChat ミニ プログラムの開発では、ドロップダウン メニューが一般的な UI コンポーネントであり、より良いユーザー エクスペリエンスを実現します。この記事では、WeChat アプレットにドロップダウン メニュー効果を実装し、実用的な機能を提供する方法を詳しく紹介します。

WeChat アプレットを使用してカルーセル切り替え効果を実現する WeChat アプレットを使用してカルーセル切り替え効果を実現する Nov 21, 2023 pm 05:59 PM

WeChat アプレットを使用してカルーセル スイッチング効果を実現する WeChat アプレットは、シンプルで効率的な開発と使用特性を備えた軽量のアプリケーションです。 WeChat ミニ プログラムでは、カルーセル スイッチング効果を実現することが一般的な要件です。この記事では、WeChat アプレットを使用してカルーセル切り替え効果を実現する方法と、具体的なコード例を紹介します。まず、カルーセル コンポーネントを WeChat アプレットのページ ファイルに追加します。たとえば、&lt;swiper&gt; タグを使用すると、カルーセルの切り替え効果を実現できます。このコンポーネントでは、 b を渡すことができます。

WeChat ミニ プログラムに画像フィルター効果を実装する WeChat ミニ プログラムに画像フィルター効果を実装する Nov 21, 2023 pm 06:22 PM

WeChat ミニ プログラムでの画像フィルター効果の実装 ソーシャル メディア アプリケーションの人気に伴い、人々は写真にフィルター効果を適用して、写真の芸術的効果や魅力を高めることがますます好まれています。画像フィルター効果は WeChat ミニ プログラムにも実装でき、より興味深く創造的な写真編集機能をユーザーに提供します。この記事では、WeChat ミニ プログラムに画像フィルター効果を実装する方法を紹介し、具体的なコード例を示します。まず、WeChat アプレットのキャンバス コンポーネントを使用して画像を読み込み、編集する必要があります。 Canvasコンポーネントはページ上で使用できます

Xianyu WeChat アプレットの名前は何ですか? Xianyu WeChat アプレットの名前は何ですか? Feb 27, 2024 pm 01:11 PM

Xianyu の公式 WeChat ミニ プログラムが静かに開始され、アイドルアイテムを簡単に公開および交換できる便利なプラットフォームをユーザーに提供します。ミニ プログラムでは、プライベート メッセージを介して購入者または販売者とコミュニケーションしたり、個人情報や注文を表示したり、欲しい商品を検索したりできます。では、WeChat ミニ プログラムでは Xianyu とはいったい何と呼ばれているのでしょうか? このチュートリアル ガイドで詳しくご紹介しますので、知りたいユーザーは、この記事に従って読み続けてください。 Xianyu WeChat アプレットの名前は何ですか? 回答: Xianyu、アイドル取引、中古品販売、評価、リサイクル。 1. ミニ プログラムでは、アイドル メッセージの投稿、プライベート メッセージを介した購入者/販売者とのコミュニケーション、個人情報と注文の表示、指定された商品の検索などができます。 2. ミニ プログラム ページには、ホームページ、近くに、アイドル投稿、メッセージ投稿、マイ投稿の5つの機能、3．

WeChatミニプログラムにスライディング削除機能を実装する WeChatミニプログラムにスライディング削除機能を実装する Nov 21, 2023 pm 06:22 PM

WeChat ミニ プログラムにスライディング削除機能を実装するには、特定のコード サンプルが必要です。WeChat ミニ プログラムの人気に伴い、開発者は開発プロセス中にいくつかの一般的な機能を実装する際に問題に遭遇することがよくあります。中でも、スライド削除機能は、よく使われる一般的な機能要件です。この記事では、WeChat アプレットにスライディング削除機能を実装する方法と具体的なコード例を詳しく紹介します。 1. 要件分析 WeChat ミニ プログラムでは、スライド削除機能の実装には次の点が含まれます。 リスト表示: スライドして削除できるリストを表示するには、各リスト項目に次の要素が含まれている必要があります。

WeChat アプレットに画像回転効果を実装する WeChat アプレットに画像回転効果を実装する Nov 21, 2023 am 08:26 AM

WeChat ミニ プログラムで画像回転効果を実装するには、特定のコード サンプルが必要です。WeChat ミニ プログラムは、ユーザーに豊富な機能と優れたユーザー エクスペリエンスを提供する軽量のアプリケーションです。ミニ プログラムでは、開発者はさまざまなコンポーネントと API を使用して、さまざまな効果を実現できます。その中で、画像回転効果は、ミニプログラムに興味と視覚効果を加えることができる一般的なアニメーション効果です。 WeChat ミニ プログラムで画像の回転効果を実現するには、ミニ プログラムが提供するアニメーション API を使用する必要があります。以下は、その方法を示す具体的なコード例です。

See all articles