小程序demo 豆瓣书城

新版csdn,还没习惯，所以直接贴代码节约时间：

总共两个页面，book和detail,实际测试时，需要到小程序服务器配置可访问安全域名地址。

book.wxml:

<!--导入module模板-->
<import src="../../module/module.wxml"/>

<view class="my-container">
  <view class='header' id='header'>
    <view class='search'>
      <input type='text' bindinput='getInfo' value="{{inputValue}}"></input>
      <icon type='cancel' size='20' bindtap='clear' wx:if="{{close}}" ></icon>
      <icon type="search" size='30' bindtap='searchBook'></icon>
    </view>
  </view>

  <view class='body'>
    <scroll-view style='height:{{scrollHeight}};width:100%;' scroll-y="true" bindscrolltolower="loadMore">

      <!--没有查找到相关图书  因为搜索使用的q,所以没有查不到的情况-->
      <view class='nothing' wx:if="{{showNoMore}}">
        <icon type="cancel" color="#B0AAAA" size="50" />
        <view><text>没有找到相关图书</text></view>
      </view>

      <!--图书列表-->
      <view class='book=list' wx:if="{{total>0}}">
        <block wx:for="{{list}}" wx:for-item="listItem" wx:key="id" wx:for-index="index">
          <view bindtap='toDetail' data-type="{{index}}">
            <template is="search" data="{{title:listItem.title,author:listItem.author,image:listItem.image,average:listItem.average}}"/>
          </view>
        </block>
      </view>

      <!--请稍等-->
      <view class='wait' wx:if="{{showLoading}}">
        <view class='blank'></view>
        <icon class='blank' type='waiting' size='30' color='yellowgreen'></icon>
        <view class='blank'><text>正在努力加载...</text></view>
      </view>


    </scroll-view>
  </view>
</view>

book.js:

const app=getApp();
var ajax=require("../../utils/ajax.js");
var copy=require("../../utils/copy.js");
var _fn;

Page({

  data: {
    //scroll-view的高度
    scrollHeight:"500px",
    //是否显示没有找到书本
    showNoMore:false,
    //是否显示加载中
    showLoading:false,
    //是否可以加载更多
    canLoadMore:false,
    //获取的图书总数
    total:0,
    //input搜索内容
    inputTag:"",
    //页数
    page:0,
    //book数据列表
    list:[],
    //清空查询
    close:false,
  },

  onLoad: function (options) {
    //设置scroll-view高度
    var self=this;
    var query=wx.createSelectorQuery();
    query.select('#header').boundingClientRect();
    query.exec(function (res) {
      //res就是 所有标签为header的元素的信息 的数组
      console.log("header 高度："+res[0].height);
      self.setData({
        scrollHeight: (app.globalData.height - res[0].height)+"px"
      });

      console.log("scrollHeight:" + self.data.scrollHeight)
    });
  
  },

  onReady: function () {
    
  },

  onShow: function () {
    
  },

  onHide: function () {
    
  },

  onUnload: function () {
    
  },

  onPullDownRefresh: function () {
    
  },

  onReachBottom: function () {
    
  },

  onShareAppMessage: function () {
    
  },

  //加载更多
  loadMore:function(){
    var self=this;
    if(self.data.canLoadMore){
      self.setData({
        showLoading:true
      });
      //获取更多数据
      console.log(self.data.inputTag+","+self.data.page);
      ajax.use(self.data.inputTag,self.data.page,function(res){
        self.setData({
          list:copy.copy(self.data.list,res),
          showLoading:false
        });

      });

      _fn.judge(self);
    }
  },

  //获取输入内容
  getInfo:function(e){
    this.setData({
      inputTag:e.detail.value
    });
    //清空查询
    if(this.data.inputTag.length>0){
      this.setData({
        close:true
      });
    }
  },

  //清空输入框
  clear:function(e){
    this.setData({
      inputValue:"",
      close:false
    });
  },

  //搜索book
  searchBook:function(){
    var self=this;
    //清空数据
    self.setData({
      page:0,
      list:[],
      showLoading:false,
      showNoMore:false,
      canLoadMore:false
    });
    //搜索请求
    ajax.use(self.data.inputTag,self.data.page,function(res){
      self.setData({
        total:wx.getStorageSync("total"),
        list:res
      });
      
     _fn.judge(self);

    });
  },

  //跳转到详情页面
  toDetail:function(e){
    var self=this;
    console.log(e.currentTarget.dataset.type);
    wx.navigateTo({
      url: '../detail/detail?bookId='+self.data.list[e.currentTarget.dataset.type].id,
    })
  },

});

_fn={
  judge:function(self){
    //判断是否还可以加载
    if (self.data.total - self.data.page * 7 > 0) {
      self.setData({
        canLoadMore: true,
        //page自增
        page: self.data.page + 1
      });
    } else {
      self.setData({
        canLoadMore: false
      });
    }
  }
};

detail.wxml:

<view class='details'>
  <view class='image-border' id='image'>
    <image src="{{image}}" mode='aspectFit'></image>
  </view>

  <view class='introduce'>

    <view class='part-one' id='one'>


      <view class='trans-price'>
        <label>{{title}}</label>
        <label>{{author}}</label>
        <label>翻译：{{translator}}</label>
      </view>

      <view class='title-author'>
        <label>评分：{{average}}</label>
        <label>零售价：{{price}}</label>
      </view>

    </view>

    <view class='part-two'>
      <scroll-view style='height:{{height}}{{px}}' scroll-y="true">
        <text decode='true'>   {{summary}}</text>
      </scroll-view>
    </view>
    
    
  </view>
  

</view>

detail.js:

const app=getApp();
var ajax=require("../../utils/ajax.js");

Page({

  /**
   * 页面的初始数据
   */
  data: {
    bookId:"",
    average:"7.0",
    title:"西游记",
    author:"吴承恩",
    translator:"黄子岚",
    price:"好多钱￥",
    summary:"概述内容",
    image:"https://img3.doubanio.com/spic/s10327151.jpg",
    height:app.globalData.height,
    px:"px"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var self=this;
    console.log(options);

    //从服务器获取书本信息
    ajax.find(options.bookId,function(res){
      console.log(res);
      self.setData({
        average:res.average,
        title:res.title,
        image:res.image,
        author:res.author,
        translator:res.translator,
        summary:res.summary,
        price:res.price
      });
    });

  },

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

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var self=this;
    //设置scroll-view 的高度
    var imageHeight;
    var introduceHeight;
    var queryOne = wx.createSelectorQuery();
    queryOne.select('#image').boundingClientRect();
    queryOne.exec(function (res) {
      imageHeight = res[0].height;
      console.log(imageHeight);
      self.setData({
        height:self.data.height-imageHeight
      });
    });
    var queryTwo = wx.createSelectorQuery();
    queryTwo.select("#one").boundingClientRect();
    queryTwo.exec(function (res) {
      introduceHeight = res[0].height;
      console.log(introduceHeight);
      self.setData({
        height:self.data.height-introduceHeight
      });
    });
    
    //由于先后关系，只能分别减去多余高度，不能同时计算
    console.log(app.globalData.height-introduceHeight-imageHeight);

  },

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

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

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

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

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

最后贴上源码下载地址：http://download.csdn.net/download/kangkang_style/10208587