豆瓣评分项目实战

最新推荐文章于 2024-04-01 16:07:30 发布
最新推荐文章于 2024-04-01 16:07:30 发布
阅读量600 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xrs151/article/details/109308174
版权

1.封装组件
封装效果如下：在这里插入图片描述

// componets/itemBox/itemBox.js
Component({
  properties: {
    item: {
      type: Object,
      value: {}
    },
    itemurl: {
      type: String,
      value: ""
    }
  },
  data: {},
  lifetimes: {
    attached: function () {
    }
  },
  methods: {
  }
})


<!--componets/itemBox/itemBox.wxml-->
<navigator wx:if="{{item}}" class='item-navigator' url="{{itemurl}}">
  <view class='item-group'>
    <view class='thumbnail-group'>
      <image class='thumbnail' src='{{item.cover.url}}'></image>
    </view>
    <view class='item-title'>{{item.title}}</view>
    <star rate="{{item.rating.value}}" starSize="25" fontSize="25"></star>
  </view>
</navigator>
<view wx:else class="item-navigator"></view>

/* componets/itemBox/itemBox.wxss */
.item-navigator{
  width: 200rpx;
  margin-right: 20rpx;
  display: inline-block;
}
.item-navigator .item-group{
  width: 100%;
}
.item-group .thumbnail-group{
  width: 100%;
  height: 284rpx;
}
.thumbnail-group .thumbnail{
  width: 100%;
  height: 100%;
}
.item-group .item-title{
  font-size: 28rpx;
  text-align: center;
  margin-top: 20rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 20rpx;
}

/* componets/itemBox/itemBox.json */{
  "component": true,
  "usingComponents": {
    "star": "/componets/star/star"
  }
}

在这里插入图片描述

// componets/listView/listView.js
Component({
  properties: {
    title: {
      type: String,
      value: ""
    },
    moreurl: {
      type: String,
      value: ""
    },
    items: {
      type: Array,
      value: []
    },
    type: {
      type: String,
      value: ""
    }
  },
  data: {},
  lifetimes: {
  },
  methods: {
  }
})


<!--componets/listView/listView.wxml-->
<view class='module-group'>
  <view class='module-top'>
    <view class='module-title'>{{title}}</view>
    <navigator url="{{moreurl}}" class='module-more'>更多</navigator>
  </view>
  <scroll-view class='module-scroll-view' scroll-x="{{true}}">
    <itemBox wx:for="{{items}}" wx:key="{{item.title}}" item="{{item}}" itemurl="/pages/detail/detail?type={{type}}&id={{item.id}}"></itemBox>
  </scroll-view>
</view>


.module-group{
  padding: 40rpx;
  background-color: #fff;
}
.module-group .module-top{
  font-size: 36rpx;
  display: flex;
  justify-content: space-between;
}
.module-top .module-title{
  color: #494949;
}
.module-top .module-more{
  color: #41be57;
}
.module-scroll-view{
  margin-top: 40rpx;
  width: 100%;
  height: 400rpx;
  white-space: nowrap;
}

在这里插入图片描述

// componets/star/star.js
Component({
  properties: {
    // 评分
    rate:{
      type:Number,
      value: 5.3
    },
    //星星大小rpx
    starSize:{
      type:Number,
      value: 30
    },
    // 是否显示文字
    isText:{
      type:Boolean,
      value: true
    },
    // 评分文字颜色
    fontColor:{
      type:String,
      value: '#FFB712'
    },
    // 评分文字大小rpx
    fontSize:{
      type:Number,
      value: 30
    }
  },
  data: {},
  lifetimes: {
    attached: function () {
      this.updateRate();
    }
  },
  methods: {
    updateRate: function () {
      var that = this;
      var rate = this.properties.rate; //评分
      var intRate = parseInt(rate);    //将输入的评分取整
      var light = parseInt(intRate / 2);  //计算亮着的星星，评分除以二后取整
      var half = intRate % 2;   //半星的计算就是取整后的评分取余
      var gray = 5 - light - half; //灰色星星的计算
      var lights = [];
      var halfs = [];
      var grays = [];
      for (var i = 1; i <= light; i++) {
        lights.push(i)
      }
      for (var i = 1; i <= half; i++) {
        halfs.push(i)
      }
      for (var i = 1; i <= gray; i++) {
        grays.push(i)
      }
      // toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
      var ratetext = rate && rate > 0 ? rate.toFixed(1) : "未评分"
      this.setData({
        lightStar: lights,
        halfStar: halfs,
        grayStar: grays,
        ratetext: ratetext
      })
    }
  }
})

<view class="starBox">
  <image style="width: {{starSize}}rpx;height: {{starSize}}rpx;" wx:for="{{lightStar}}" src="/images/x3.png" />    
  <image style="width: {{starSize}}rpx;height: {{starSize}}rpx;" wx:for="{{halfStar}}" src="/images/x2.png" />    
  <image style="width: {{starSize}}rpx;height: {{starSize}}rpx;" wx:for="{{grayStar}}" src="/images/x1.png" />    
  <text wx:if="{{isText}}" style="color:{{fontColor}};font-size:{{fontSize}}rpx;margin-left:5rpx">{{ratetext}}</text>
</view>

/* componets/star/star.wxss */
.starBox{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

在这里插入图片描述

// componets/userComment/userComment.js
Component({
  properties: {
    item: {
      type: Object,
      value: {}
    }
  },
  data: {},
  methods: {
  }
})

<!--componets/userComment/userComment.wxml-->
<view class='comment-group'>
  <view class='left-comment'>
    <image class="avatar" src="{{item.user.avatar}}"></image>
  </view>
  <view class='right-comment'>
    <view class='username-rate'>
      <text class='username'>{{item.user.name}}</text>
      <star rate="{{item.rating.value*2}}" starsize="30" isText='{{false}}'></star>
    </view>
    <view class="release-time">{{item.create_time}}</view>
    <view class='content'>{{item.comment}}</view>
  </view>
</view>


/* componets/userComment/userComment.wxss */
.comment-group{
  display: flex;
  justify-content: flex-start;
  padding-top: 40rpx;
}
.comment-group .left-comment{
  width: 70rpx;
  margin-right: 20rpx;
}
.left-comment .avatar{
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}
.comment-group .right-comment{
  flex: 1;
}
.right-comment .username-rate{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.username-rate .username{
  font-size: 36rpx;
  margin-right: 20rpx;
}
.release-time{
  color: #b3b3b3;
  font-size: 32rpx;
  margin-top: 10rpx;
}
.content{
  font-size: 32rpx;
  color: #353535;
  margin-top: 10rpx;
}

2.封装接口，方法

/* componets/utils/url.js */
const urlList = [
 "https://m.douban.com/rexxar/api/v2/subject_collection/movie_showing/items",
  "https://m.douban.com/rexxar/api/v2/subject_collection/tv_hot/items",
 "https://m.douban.com/rexxar/api/v2/subject_collection/tv_variety_show/items",
  "https://m.douban.com/rexxar/api/v2/search"
]
const parameter = {
  itemDetail(type, id) {
    return "https://m.douban.com/rexxar/api/v2/" + type + "/" + id
  },
  typeTag(type, id) {
    return "https://m.douban.com/rexxar/api/v2/" + type + "/" + id + "/tags?count=8"
  },
  commentary(type, id) {
    return "https://m.douban.com/rexxar/api/v2/"+type+"/"+id+"/interests"
  }
}
export { urlList,parameter }

/* componets/utils/net.js */
const netWork = {
  listData(obj) {
    new Promise(function (resolve, reject) {
      wx.showLoading({
      })
      wx.request({
        url: obj.url,
        data: {
          count: obj.num
        },
        success: (res) => {
          resolve(res)
        },
        fail: (res) => {
          reject(res)
        }
      })
    }).then(res => {
      wx.hideLoading()
      obj.success(res)
    }).catch(res => {
      console.log('网络请求失败', res)
    })
  },
  search(obj) {
    new Promise(function (resolve, reject) {
      wx.showLoading({
      })
      wx.request({
        url: obj.url,
        data: {
          q: obj.value
        },
        success: (res) => {
          resolve(res)
        },
        fail: (res) => {
          reject(res)
        }
      })
    }).then(res => {
      wx.hideLoading()
      obj.success(res)
    }).catch(res => {
      console.log('网络请求失败', res)
    })
  },
  itemData(obj) {
    new Promise(function (resolve, reject) {
      wx.showLoading({
      })
      wx.request({
        url: obj.url,
        success: (res) => {
          resolve(res)
        },
        fail: (res) => {
          reject(res)
        }
      })
    }).then(res => {
      wx.hideLoading()
      obj.success(res)
    }).catch(res => {
      console.log('网络请求失败', res)
    })
  },
  commentary(obj) {
    new Promise(function (resolve, reject) {
      wx.showLoading({
      })
      wx.request({
        url: obj.url,
        data:{
          count: obj.count,
          start: obj.start
        },
        success: (res) => {
          resolve(res)
        },
        fail: (res) => {
          reject(res)
        }
      })
    }).then(res => {
      wx.hideLoading()
      obj.success(res)
    }).catch(res => {
      console.log('网络请求失败', res)
    })
  }
}
export { netWork }

3.显示
在这里插入图片描述

// pages/index/index.js
import { urlList } from '../../utils/url'
import { netWork } from '../../utils/net'
Page({
  // 搜索框动效
  showSearch: function () {
    this.setData({
      center: "center"
    })
    setTimeout(() => {
      this.setData({
        center: "left"
      })
    }, 3000)
  },
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    // 电影
    netWork.listData({
      url: urlList[0],
      num: 10,
      success(data) {
        that.setData({
          movies: data.data.subject_collection_items
        })
        // console.log(that.data.movies)
      }
    })
    // 电视剧
    netWork.listData({
      url: urlList[1],
      num: 10,
      success(data) {
        that.setData({
          teleplay: data.data.subject_collection_items
        })
        // console.log(that.data.movies)
      }
    })
    // 综艺
    netWork.listData({
      url: urlList[2],
      num: 10,
      success(data) {
        that.setData({
          variety: data.data.subject_collection_items
        })
        // console.log(that.data.movies)
      }
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

<!--pages/index/index.wxml-->
<search isnavigator="{{true}}" position="{{center}}" bindtap="showSearch"></search>
<listView title="电影" items="{{movies}}" moreurl="/pages/list/list?type=movie" type="movie"></listView>
<listView title="电视剧" items="{{teleplay}}" moreurl="/pages/list/list?type=tv" type="tv"></listView>
<listView title="综艺" items="{{variety}}" moreurl="/pages/list/list?type=tvshow" type="tv"></listView>
<!-- <userComment wx:for="{{comments}}" item="{{item}}"></userComment> -->

在这里插入图片描述

// pages/list/list.js
import { urlList } from '../../utils/url'
import { netWork } from '../../utils/net'
var current = 1;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:9
  },
  // 上拉加载
  loadData: function (num,type) {
    var that = this
    if(type == 'movie')
    {
      netWork.listData({
        url: urlList[0],
        num: num * current,
        success(data) {
          that.setData({
            listData: data.data.subject_collection_items
          })
          // console.log(that.data.movies)
        }
      })
    }else if(type == 'tv')
    {
      netWork.listData({
        url: urlList[1],
        num: num * current,
        success(data) {
          that.setData({
            listData: data.data.subject_collection_items
          })
          // console.log(that.data.movies)
        }
      })
    }else if(type == 'tvshow')
    {
      netWork.listData({
        url: urlList[2],
        num: num * current,
        success(data) {
          that.setData({
            listData: data.data.subject_collection_items
          })
          // console.log(that.data.movies)
        }
      })
    }
    
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options.type);
    current=1
    // var that = this
    this.setData({
      type:options.type
    })
    this.loadData(this.data.num,this.data.type) 
  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    current++;
    this.loadData(this.data.num,this.data.type) 
  },

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

  }
})

<!--pages/list/list.wxml-->
<view class="listBox">
  <itemBox wx:for="{{listData}}" wx:key="{{item.title}}" item="{{item}}" itemurl="/pages/detail/detail?type={{type}}&id={{item.id}}"></itemBox>
</view>



/* pages/list/list.wxss */
.listBox{
  width: 660rpx;
  margin: 30rpx auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

在这里插入图片描述

// pages/detail/detail.js
import { urlList,parameter } from '../../utils/url'
import { netWork } from '../../utils/net'
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  netWork(type,id){
    var that = this
    // 详情
    netWork.itemData({
      url: parameter.itemDetail(type,id),
      success(data) {
        that.setData({
          itemData: data.data
        })
      }
    })
    // 标签
    netWork.itemData({
      url: parameter.typeTag(type,id),
      success(data) {
        that.setData({
          tagData: data.data.tags
        })
      }
    })
    // 短评
    netWork.commentary({
      url: parameter.commentary(type,id),
      count: 3,
      start: 0,
      success(data) {
        that.setData({
          commentaryData: data.data.interests,
          total:data.data.total
        })  
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.netWork(options.type,options.id)
    this.setData({
      type: options.type,
      id: options.id
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

<!--pages/detail/detail.wxml-->
<view class="detailBox" wx:if="{{itemData}}">
  <view style="font-weight: bold;font-size:45rpx">{{itemData.title}}</view>
  <view style="display:flex">
    <view class="detailBox-l">
      <view style="display:flex">
        <star wx:if="{{itemData.rating.value != undefined}}" rate="{{itemData.rating.value}}" starSize="23" fontSize="23" fontColor="#000"></star>
        <view style="font-size: 23rpx;margin-left:10rpx;color: #A9A9A9">{{itemData.review_count}}人评价</view>
      </view>
      <view class="textBox">{{itemData.durations}} {{itemData.genres[0]}}/{{itemData.genres[1]}}</view>
      <view class="textBox">{{itemData.pubdate}}</view>
      <view class="textBox">{{itemData.card_subtitle}}</view>
    </view>
    <view class="detailBox-r">
      <image src="{{itemData.pic.large}}" mode="aspectFill"></image>
    </view>
  </view>
  <!-- 豆瓣成员常用标签 -->
  <view class="detailBox-tag">
    <view style="font-size: 26rpx;color:#A9A9A9">豆瓣成员常用标签</view>
    <view class="detailBox-tag-box" >
      <view wx:for="{{tagData}}">{{item}}</view>
    </view>
  </view>
  <!-- 短评 -->
  <view>
    <view class="detailBox-commentary">短评（{{total}}）</view>
    <userComment wx:for="{{commentaryData}}" item="{{item}}"></userComment>
    <navigator class="more-commentary" url="/pages/comment/comment?img={{itemData.pic.large}}&title={{itemData.title}}&pf={{itemData.rating.value}}&type={{type}}&id={{id}}">查看更多短评</navigator>
  </view>
</view>

/* pages/detail/detail.wxss */
.detailBox{
  width: 100vw;
  box-sizing: border-box;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
}
.detailBox .detailBox-l{
  width: 384rpx;
  margin-right: 60rpx;
  line-height: 100rpx;
}
.detailBox .detailBox-l .textBox{
  font-size: 30rpx;
  line-height: 60rpx;
  /* 允许在单词内换行 */
  word-break:break-all;  
} 
.detailBox .detailBox-r image{
  width: 250rpx;
  height: 380rpx;
}
.detailBox .detailBox-tag{
  width: 100%;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
}
.detailBox .detailBox-tag .detailBox-tag-box{
  display: flex;
  flex-wrap: wrap;
}
.detailBox .detailBox-tag .detailBox-tag-box view{
  overflow: hidden;
  background-color: #F5F5F5;
  border-radius: 40rpx;
  padding: 10rpx 20rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: 500;
  margin: 30rpx 0rpx 0 13rpx;
}
.detailBox-commentary{
  width: 90vw;
  margin: 80rpx auto 20rpx auto ;
  font-size: 26rpx;
  color:#A9A9A9
}
.more-commentary{
  width: 100vw;
  text-align: center;
  color: #43BE58;
  margin-top: 30rpx;
}

在这里插入图片描述

// pages/comment/comment.js
import { urlList, parameter } from '../../utils/url'
import { netWork } from '../../utils/net'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isButton: true,
    start: 0
  },
  // 影评数据
  commentData(type, id) {
    var that = this
    netWork.commentary({
      url: parameter.commentary(type, id),
      count: 8,
      start: 0,
      success(data) {
        that.setData({
          commentData: data.data.interests,
          total: data.data.total,
        })
      }
    })
  },
  // 上一页
  pageUpClick() {
    var that = this
    netWork.commentary({
      url: parameter.commentary(that.data.type, that.data.id),
      count: 8,
      start: that.data.start - 8,
      success(data) {
        that.setData({
          commentData: data.data.interests,
          total: data.data.total,
          start: that.data.start - 8
        })
        if (that.data.start == 0) {
          // 禁用上一页
          that.setData({
            isButton: true
          })
        } 
        wx.pageScrollTo({
          scrollTop: 0,
        })
      }
    })
  },
  // 下一页
  pageDownClick() {
    var that = this
    netWork.commentary({
      url: parameter.commentary(that.data.type, that.data.id),
      count: 8,
      start: that.data.start + 8,
      success(data) {
        that.setData({
          commentData: data.data.interests,
          total: data.data.total,
          start: that.data.start + 8,
          isButton: false
        })
        wx.pageScrollTo({
          scrollTop: 0,
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      img: options.img,
      title: options.title,
      pf: options.pf,
      type: options.type,
      id: options.id
    })
    this.commentData(options.type, options.id)
  },

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

  },

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

  },

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

  },

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

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

  },

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

  },

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

  }
})

<!--pages/comment/comment.wxml-->

<view wx:if="{{commentData}}">
  <view class="commentbox">
    <image src="{{img}}" />
    <view class="commentbox-title">{{title}}</view>
    <view style="color:#A9A9A9;font-size:28rpx;width:120rpx">{{pf}}分</view>
  </view>
  <!-- 短评 -->
  <view class="commentary-box">
    <view class="commentary">全部影评（{{total}}）</view>
    <userComment wx:for="{{commentData}}" item="{{item}}"></userComment>
    <view class="button-box">
      <button style="width:230rpx" disabled="{{isButton}}" catch:tap="pageUpClick">上一页</button>
      <button style="width:230rpx"  catch:tap="pageDownClick">下一页</button>
    </view>
  </view>

</view>

/* pages/comment/comment.wxss */
.commentbox {
  display: flex;
  width: 90vw;
  margin: 0 auto;
  height: 10vh;
  align-items: center;
}

.commentbox image {
  width: 50rpx;
  height: 60rpx;
  margin-right: 15rpx;
}

.commentary {
  width: 90vw;
  margin: 20rpx auto 20rpx auto;
  font-size: 40rpx;
  font-weight: bold;
}

.commentary-box {
  width: 100vw;
  box-sizing: border-box;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
}

.button-box {
  width: 100vw;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-evenly;
  margin: 50rpx 0;
}
.button-box button{
  background-color:	#F5F5F5;
}

.commentbox-title {
  color: #4CC05F;
  margin-right: 15rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

项目结构
在这里插入图片描述

伊泽先生丿瑞尔
关注
微信小程序--搜索电影app（续）
Inite的博客
07-10 2328
热门推荐页面各个文件代码如下： recommendMovies.wxml： 名称：{{item.title}} {{item.rating.average}}分 类型：
Vue3.0实战豆瓣评分项目
06-30
本课程以豆瓣评分小程序为载体，通过整体项目的制作来掌握vue项目的开发流程以及vue3.0新特性在项目实战中的使用技巧，使同学们对于组件化编程思想，代码逻辑复用有更深入的理解，重点理解vue3.0在代码逻辑复用上的...
微信小程序（五）：上滑加载更多和下拉刷新的实现
skye_95的博客
07-24 2934
1.准备工作 由于要演示上滑加载更多，所以此处换用豆瓣的API。在微信公众平台-》开发-》服务器域名进行配置。本来是要配置https://api.douban.com的，但是控制台报错403，查阅资料修改为https://douban.uieee.com。并在微信开发者工具-》详情中进行设置，便可成功请求数据。 url:https://douban.uieee.com/v2/movi...
微信小程序上滑加载更多
weixin_30507269的博客
08-15 186
onReachBottom: function () { var that = this var limit = that.data.limit var count = that.data.count if(count>limit){ limit = limit + 5 }else{ wx.showToa...
微信小程序上滑触底加载更多
ai_xy的博客
04-12 635
js中编写触底加载更多数据大致逻辑，根据自身情况稍作修改即可 var app = getApp(); const api = require('../utils/api'); Page({ data: { dataList: [], //数据列表 pageNum: 1, //页数 pageSize: 12, //每页数据条数 dataBack: true, //触底加载 }, loadMoreData: function() { var _thi
上滑加载更多
cpongo881
03-27 330
上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑加载更多上滑...
（原价299）零基础吃透微信小程序项目实战豆瓣评分微博云开发技术视频.txt
03-20
（原价299）零基础吃透微信小程序项目实战豆瓣评分微博云开发技术视频.txt
基于Vant的豆瓣评分微信小程序源码.zip
07-11
标题"基于Vant的豆瓣评分微信小程序源码.zip"表明这是一个关于微信小程序的项目，其中使用了Vant UI框架来构建一个能够显示豆瓣评分的应用。Vant是一个轻量、高效的移动端组件库，适用于Vue.js，它提供了丰富的UI...
Requests实战小案例—-豆瓣
12-21
在本篇【Requests实战小案例—-豆瓣】中，我们将探讨如何使用Python的Requests库来爬取豆瓣电影网站上的电影信息。首先，我们要了解爬虫的基本步骤：分析目标网站的网络请求、确定所需数据和参数、构造请求并解析...
微信小程序_上拉加载更多_demo
05-17
微信小程序 上拉加载更多 demo,欢迎下载。微信小程序 上拉加载更多 demo,欢迎下载微信小程序 上拉加载更多 demo,欢迎下载
上滑加载更多，下滑更新
08-18
上滑加载更多，下滑更新，在之前网上的模版进行更新，终于上项目了
微信小程序例子 下拉加载更多
11-08
可以支持下拉加载，通过接口接收自己的后台的数据
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
10-15
主要介绍了微信小程序实现上拉加载功能,结合实例形式分析了微信小程序加载更多数据、触底加载或点击加载更多数据的相关实现技巧与操作注意事项,需要的朋友可以参考下
ListView完整下拉刷新上滑加载更多，简单的代码，完整的功能，你指的拥有
09-01
ListView完整下拉刷新上滑加载更多，简单的代码，完整的功能，你指的拥有
微信小程序 下拉刷新/上拉加载更多 （上拉加载更多怎么实现）
热门推荐
武当山道士的博客
05-23 2万+
参考：微信小程序开发文档-&amp;amp;gt;框架&amp;amp;gt;逻辑层-&amp;amp;gt;注册页面 实现原理： 1、下拉刷新：由于小程序数据是实时渲染的。我们把data{}内的数据清空重新加载即可实现下拉刷新。 2、上拉加载更多（页面上拉触底事件）：新获取的数据追加到data{}内的原数据即可。由于小程序数据是实时渲染，小程序在保持原数据显示不变的基础上，自动追加渲染显示新数据。 注意（小程序官方有说明）：上拉加载更...
微信小程序上拉加载更多
candyy5的博客
12-16 196
data:{ by_no: 1, //页码 } onLoad: function (options) { this.getmessageList() }, getmessageList:function(){ var that = this wx.showLoading({ title: '加载中...', }) wx.request({ url: '' method: "POST", // 请求头部 heade
微信小程序上拉加载更多数据
最新发布
motoudi的博客
04-01 549
这只是一个基本的实现示例，你可以根据实际需求进行扩展和优化，比如添加错误处理、分页参数传递、加载动画等。当页面滚动到底部时，该函数会被触发。替换为你实际的后端接口地址，并且根据实际的API响应格式来调整数据处理逻辑。函数负责发起请求获取更多数据，并在获取成功后更新页面数据。函数在页面滚动到底部时被调用，从而触发加载更多数据的逻辑。在微信小程序中实现上拉加载更多的功能，通常需要使用到。
上滑加载更多的 RecyclerView
hepann的博客
11-12 525
这是一个简单的自定义 RecyclerView 利用本身的滑动监听实现上滑加载. 来自新入职的公司xbxm.好处时轻量, 不用去依赖三方包 package com.newboom.umall.view; import android.content.Context; import android.support.v7.widget.GridLayoutManager; import andr...
scrapy爬虫项目实战豆瓣
03-29
本篇文章将介绍如何使用Scrapy框架实现豆瓣电影的爬虫项目。 1. 创建Scrapy项目 首先，我们需要安装Scrapy框架。在命令行中输入以下命令： ``` pip install scrapy ``` 安装完成后，我们可以使用以下命令创建一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值