swiper-list.js 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. export default {
  2. data() {
  3. return {
  4. MIXIN_NowIndex: 0,
  5. MIXIN_ActiveIndex: 0,
  6. MIXIN_MoveBarLeft: 0,
  7. MIXIN_FinishedIndex: 0,
  8. MIXIN_ScrollViewHeight: 0, // scroll view 高
  9. MIXIN_ScreenWidth: this.$store.state.device.screenWidth // 屏幕宽
  10. }
  11. },
  12. mounted() {
  13. this.$offset('.swiper').then(res => { this.MIXIN_ScrollViewHeight = res.height }) // 设置scrollview 高
  14. },
  15. methods: {
  16. MIXIN_transition({ detail: { dx } }) { // swiper 切换时 ///////////////////////////////////////////////////////////////////<固定写法>
  17. // this.MIXIN_MoveBarLeft = this.MIXIN_FinishedIndex * (this.MIXIN_ScreenWidth / this.typeList.length) + dx / this.typeList.length
  18. },
  19. MIXIN_change({ detail: { current } }) {
  20. this.MIXIN_ActiveIndex = current
  21. this.MIXIN_MoveBarLeft = this.MIXIN_ActiveIndex * (this.MIXIN_ScreenWidth / this.typeList.length)
  22. },
  23. MIXIN_animationfinish({ detail: { current } }) { // swiper 停止切换
  24. this.MIXIN_FinishedIndex = this.MIXIN_NowIndex = current
  25. if (!this.lists[this.MIXIN_NowIndex].length && this.page[this.MIXIN_NowIndex] !== 0) { // 当当前类型数量为 0 且有不是 没有更多时请求列表
  26. this.MIXIN_request()
  27. }
  28. },
  29. switchSwiper(index) { // 点击导航栏切换
  30. this.MIXIN_NowIndex = this.MIXIN_ActiveIndex = index
  31. this.MIXIN_MoveBarLeft = (this.MIXIN_NowIndex + 1) * (this.MIXIN_ScreenWidth / this.typeList.length)
  32. }, /////////////////////////////////////////////////////////////////////////////////////////////////////////////////<固定写法>
  33. MIXIN_pulldownrefresh() { // 下拉刷新
  34. this.page[this.MIXIN_NowIndex] = 1
  35. this.MIXIN_request().then(() => { this.$refs.pulldownRefresher.pullup() })
  36. },
  37. MIXIN_scrolltolower() { // 上拉加载
  38. this._requesting ? '': this.MIXIN_request('loadmore')
  39. },
  40. MIXIN_request(action) { // 请求数据
  41. return new Promise(resolve => { // 只有在 首次加载列表或者下拉刷新时才显示 liaoding
  42. if (this.page[this.MIXIN_NowIndex]) { // 当上一批数量不小于 size 时执行
  43. !action && uni.showLoading({ mask: true }) // 开始 loading, 只有在 首次加载列表或者下拉刷新时才显示 liaoding
  44. this._requesting = true // 请求加锁防抖
  45. this.apis[this.MIXIN_NowIndex]({ page: this.page[this.MIXIN_NowIndex] }).then(res => {
  46. this.MIXIN_requestHandle ? this.MIXIN_requestHandle(res) : '' // 执行请求结束处理函数
  47. !action ? this.lists[this.MIXIN_NowIndex] = [] : '' ,// 如果是下拉刷新,清空列表
  48. this.lists[this.MIXIN_NowIndex] = [...this.lists[this.MIXIN_NowIndex], ...res.data.list]
  49. res.data.list.length < +res.data.size ? this.page[this.MIXIN_NowIndex] = 0 : this.page[this.MIXIN_NowIndex] += 1 // 如果返回列表数量小于 10 表示没有更多了
  50. }).catch(() => { // 网络请求失败 进入失败状态
  51. this.page[this.MIXIN_NowIndex] = -1
  52. this.lists[this.MIXIN_NowIndex] = []
  53. }).finally(() => { // promise 结束
  54. this._requesting = false // 取消请求加锁防抖
  55. resolve() // 通知下拉刷新收起并把数据传出去
  56. })
  57. }
  58. })
  59. } ///////////////////////////////////////////////////////////////////////////////////////<固定写法>
  60. }
  61. }