• <del id="u8vnz"><form id="u8vnz"></form></del>
      <em id="u8vnz"><em id="u8vnz"></em></em>

    1. <strong id="u8vnz"><font id="u8vnz"></font></strong>

      <th id="u8vnz"></th>

      玉溪市微信公眾平臺小程序開發(fā)定制公司,成品案例多,可加急

      微信小程序使用的是MVVM框架,通過數(shù)據(jù)的綁定,可以實時解析視圖的內(nèi)容,從而展示不同內(nèi)容,下面要介紹的是一種經(jīng)常使用的功能,就是如果微信小程序里加載產(chǎn)品的列表功能,當(dāng)用戶向下滑動時,會不間斷的加載產(chǎn)品。
      看來先js文件:
      1.初始化參數(shù)
        data: {
      p: 1,//當(dāng)前是第幾頁
      list: [],//產(chǎn)品數(shù)據(jù)的數(shù)組
      hasMoreData: true, //是否需要加載更多內(nèi)容
      },
      再來看onLoad函數(shù),就是加載一個getProlist函數(shù)
      2.onLoad: function (options) {
          var that = this
          that.getProlist('正在加載數(shù)據(jù)...')
        },
      3.getProlist: function (message) {
          wx.showLoading({
            title: message,//提示正在加載中
          })
          var that = this
          var p = that.data.p
          //加載新產(chǎn)品
          var request_newpro_url = util.getApiUrl(app, "/GList/newpro", "&p=" + p)
          util._get(request_newpro_url,
            function (res) {
              wx.hideLoading();//關(guān)閉提示
              var list = that.data.list;//獲取list的值
              if (list == false) { //如果數(shù)據(jù)為空,則list就等于加載過來的數(shù)據(jù)就可以
              var data_list = res.data.data
              }else{
                var list2 = res.data.data
                var data_list = list.concat(list2);//因為list不為空,所以需要將list和list2兩個數(shù)組合并起來,再把值賦予data_list
              }
              //如果頁面數(shù)等于當(dāng)前頁,那就不要再加載了
              if (res.data.page_count <= res.data.p) {
                that.setData({
                  hasMoreData: 0,
                })
              }
              that.setData({
                page_count: res.data.page_count,
                list: data_list //將data_list綁定到list中,這樣list用this.data.list獲取時,又是一個新的數(shù)組了
              })
            },
            function (res) {
              wx.hideLoading();
              wx.showToast({
                title: res.errMsg,
                duration: 2000
              })
            }
          )
        },
       //頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
        4.onPullDownRefresh: function () {
          this.getProlist('正在刷新數(shù)據(jù)')
        },
         //頁面上拉觸底事件的處理函數(shù)
       
        5.onReachBottom: function () {
          var that = this
          var p = that.data.p
          if (that.data.hasMoreData) { //判斷hasMoreData是不是等1,如果不等于1,則不再運行調(diào)用getProlist函數(shù),也就是說加載到些結(jié)束了。
            that.setData({
              p: Number(p) + 1,
            })
            this.getProlist('加載更多數(shù)據(jù)')
          } else {
            wx.showToast({
              title: '沒有更多數(shù)據(jù)',
            })
          }
        },
       
      再來看下后臺的程序部分,還是比較簡單的,使用的是thinkphp框架:
      public function newpro(){
              $url_arr['status'] = 1;//查詢條件
                        $page= 6;//每次加載多個產(chǎn)品
                        $p = I('request.p',1);//第幾頁
                        $pagesize = ($p-1)*$page;//要加載從第幾個開始的產(chǎn)品
              $list=$ModelGoods->where($url_arr)->order('order_id asc,goods_id desc')->limit($pagesize,$page)->select();//獲取查詢的數(shù)據(jù)
                        $total_count=$ModelGoods->where($url_arr)->order('order_id asc,goods_id desc')->count();//計算所有符合條件的產(chǎn)品總數(shù)
                        $page_count = ceil($total_count/$page);//所有的產(chǎn)品一共有多少頁,向上取整
                        $data['p'] = $p;
                        $data['total_count'] = $total_count;
                        $data['page_count'] = $page_count;              
              $data['data'] = $list;
              $this->response($data,C('API_TYPE'));//將這些參數(shù)傳遞到微信小程序里
      }
       
      這個功能也是同樣運用了小程序MVVM的思想,通過后臺加載過來的數(shù)據(jù),將數(shù)據(jù)一次次并接,形成更多的數(shù)據(jù),讓瀏覽者能夠比較舒適的查看內(nèi)容變化,形成好的瀏覽體驗

      以上是啟凡網(wǎng)絡(luò)小程序開發(fā)公司的小程序開發(fā)知識介紹。我們有一個專業(yè)的小程序開發(fā)團(tuán)隊,可以根據(jù)不同的客戶要求完成小程序的開發(fā)和定制,保證設(shè)計出來的小程序更專業(yè)。我們深知客戶的需求,致力于服務(wù)每一位客戶,讓客戶享受到優(yōu)質(zhì)的服務(wù),保證小程序更穩(wěn)定,保證小程序更好的推廣和營銷效果。當(dāng)然,做好小程序制作的充分準(zhǔn)備尤為重要。

      相關(guān)案例