Wechat----显示页面 pages book

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/damys/article/details/87858767

pages 加载页面显示

pages/book/book.js

import { BookModel } from '../../models/book.js'
import { random } from '../../utils/util.js'

const bookModel = new BookModel()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    books:[],
    searching:false,
    more:''
  },

  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 一般使用
    // const hotList = bookModel.getHotList()
    // hotList.then(
    //   res => console.log(res)
    // )

    // 使用链式
    bookModel.getHotList()
    .then(res => {
      // api1
      // console.log(res)
      this.setData({
        books:res
      })
    })






    //------promise 基本测试  ------------------------

    /**
     * Promise 对象， 函数, 
     * 对象保存状态，函数一般不行。除闭包
     * 状态：pending(进行中)， fulfilled(已成功), rejected(已失败)
     */
    const promise = new Promise((resolve, reject)=>{
      /**
       * new 后状态为进行中
       * resolve 将状态改为已成功， 改后凝固状态
       * reject 将状态改为已失败， 改后凝固状态
       */
      wx.getSystemInfo({
        success: (res)=>{
          resolve(res)
        },
        fail: (error)=>{
          reject(error)
        }
      })
    })
  
  },


  // 显示search
  onSearching(event){
    this.setData({
      searching:true
    })
  },

  // 隐藏search
  onCancel(event){
    this.setData({
      searching:false
    })
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   * 
   * onReachBottom 只能在页面中使用，不能在组件中使用
   * 可以通过：通知组件加载更多
   */
  onReachBottom: function () {
    this.setData({
      more: random(16)
    })

    console.log('上拉触底事件')
  },


  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

pages/book/book.json 使用组件

{
  "usingComponents": {
    "v-book":"/components/book/index",
    "v-search": "/components/search/index"
  },
  
  "onReachBottomDistance": 50
}

pages/book/book.wxml

<view wx:if="{{!searching}}" class="container">
   <view class="header">
     <view class='box' bind:tap="onSearching">
      <image src="/images/icon/search.png" />
      <text>搜索书籍</text>
    </view> 
  </view> 

   <view class="sub-container">
    <image class="head-img" src="/images/book/quality.png" />
    
    <view class="books-container">
      <block wx:key="{{id}}" wx:for="{{books}}">
        <v-book book="{{item}}" class="book" />
      </block>
    </view>

  </view> 
</view>

<v-search more="{{more}}" bind:cancel="onCancel" wx:if="{{searching}}" />

pages/book/book.wxss

.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  width:100%;
  background: #f5f5f5;
}

 .sub-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f5f5;
  margin-top:100rpx;
} 

.books-container{
  margin-top:10rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 换行 */
  padding: 0 90rpx;
  justify-content: space-between;
}

.books-container v-book{
  margin-bottom: 30rpx;
}

.box{
  display:flex; 
  flex-direction: row;
  justify-content: center;
  align-items: center; 
  border-radius: 50px;
  background-color: #f5f5f5;
  height: 34px;
  width:700rpx;
  color:#999999;
}

.header{
  position: fixed; 
  background-color: #ffffff;
  height:100rpx;
  width:100%;
  border-top:1px solid #f5f5f5;
  border-bottom:1px solid #f5f5f5;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-shadow:0 0 3px 0 #e3e3e3; 
  z-index: 99;
}

.head-img{
  width:106rpx;
  height:34rpx;
  margin-top:40rpx;
}

.box image{
  margin-right:10px;
  width:14px;
  height:14px;
  margin-bottom:-2px;
}