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

この記事では主に、リストページを実装するための 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 サイトの他の関連記事を参照してください。