devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小程序实现左右滑动切换菜单+瀑布流显示列表_前端瀑布流+左右滑动tab页面

作者：从前慢现在也慢 | 2024-05-13 21:06:19

赞

踩

前端瀑布流+左右滑动tab页面

小程序实现左右滑动列表区域，切换菜单（横向滑动菜单，切换时自动设置选中的菜单窗口居中显示），加载显示对应瀑布流数据，页面滚动时，设置菜单栏是否置顶显示

自己写的一个demo（下载地址：https://download.csdn.net/download/qq_16494241/11208785）

 

 

app.js中加处理方法：

  1.   //处理下页列表数据，追加至列表数据存储变量中
  2.   addList(oldData, newData) {
  3.     for (var item in newData) {
  4.       oldData.push(newData[item]);
  5.     }
  6.     return oldData;
  7.   },
  8.  
  9.   //处理设置最新获取到的瀑布流数据
  10.   setCurNewPubuImgData: function (oldImgDataJson) {
  11.     let oldImgData = [];
  12.     for (var item in oldImgDataJson) {
  13.       oldImgData[item] = oldImgDataJson[item];
  14.     }
  15.     return oldImgData;
  16.   },
  17.   //处理存储瀑布流左右两边数据
  18.   setCurResultsPubuImgData(newImgData, oldData, leftH, rightH ,callback) {
  19.     //let leftH = 0;
  20.     //let rightH = 0;
  21.  
  22.     let resultsList = {
  23.       listL: [],
  24.       listR: [],
  25.     }
  26.  
  27.     let leftStart = 0;
  28.     let rightStart = 0;
  29.  
  30.     for (var item in newImgData) {
  31.       //console.log(leftH, rightH, newImgData[item].h);
  32.       //console.log(leftH <= rightH);
  33.       if (leftH <= rightH){
  34.         resultsList.listL[leftStart] = oldData[item];
  35.         leftStart ++;
  36.         leftH += newImgData[item].h;
  37.       }else{
  38.         resultsList.listR[rightStart] = oldData[item];
  39.         rightStart ++;
  40.         rightH += newImgData[item].h;
  41.       }
  42.     }
  43.     callback(resultsList , leftH, rightH);
  44.   }

index.wxml

  1. <!--pages/test/index.wxml-->
  2. <scroll-view class="body" scroll-y="{{ifCanScroll}}" bindscrolltolower="scrollEnd" bindscroll="scrollIn">
  3.  
  4. <!--KV图切换-->
  5.   <view id='top' class='swiper'>
  6.     <swiper indicator-color='{{indicatorcolor}}' indicator-active-color='{{indicatoractivecolor}}' indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}"  interval="{{interval}}"  duration="{{duration}}">
  7.       <block wx:for="{{swiperImgArr}}">
  8.         <swiper-item>
  9.  
  10.           <navigator wx:if="{{item.linkUrl != ''}}" url="{{item.linkUrl}}" open-type="navigate">
  11.             <image mode='widthFix' src="{{item.src}}" />
  12.           </navigator>
  13.  
  14.           <image wx:else mode='widthFix' src="{{item.src}}" />
  15.  
  16.         </swiper-item>
  17.       </block>
  18.     </swiper>
  19.   </view>
  20.  
  21.  
  22.  
  23.  
  24. <!--选择切换菜单  与以下  分开写避免了导航固定时页面跳动-->
  25. <scroll-view scroll-x scroll-with-animation="true" scroll-left="{{ navIndex * 150 - 375 + 150 / 2 }}rpx" class="nav_box">
  26. 	<view class="nav_body nav_body_cur{{navIndex}}" style="width: calc(150rpx * {{navList.length}});">
  27. 		<view class='nav_li' wx:for="{{navList}}" data-type='{{index}}' bindtap='changeTitle'>{{item}}</view>
  28. 	</view>
  29. </scroll-view>
  30. <!--浮动在顶部的选择切换菜单  与以上  分开写避免了导航固定时页面跳动-->
  31. <scroll-view scroll-x scroll-with-animation="true" scroll-left="{{ navIndex * 150 - 375 + 150 / 2 }}rpx" class="nav_box nav_body_top" style="height: {{ifShowTopNav ? 'auto' : 0}};">
  32. 	<view class="nav_body nav_body_cur{{navIndex}}" style="width: calc(150rpx * {{navList.length}});">
  33. 		<view class='nav_li' wx:for="{{navList}}" data-type='{{index}}' bindtap='changeTitle'>{{item}}</view>
  34. 	</view>
  35. </scroll-view>
  36.  
  37.  
  38.  
  39.  
  40.  
  41.  
  42.   <!--瀑布流所需，图片显示前用来获取图片等宽时的高度-->
  43.   <view class='get_pubu_img'>
  44.     <image wx:for="{{pubuliuNewArrData}}" mode='widthFix' data-key='{{index}}' bindload='pubuImgLoad' src="{{item.src}}"  />
  45.   </view>
  46. 	
  47. 	
  48.   <!--瀑布流显示-->
  49.   <view class="box" style='{{moveLeft}}' bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd'>
  50. 		
  51. 		<view wx:if="{{!pubuliuResultsList.listL[0]}}" class="no_data_show">暂无数据</view>
  52. 		
  53.     <!--瀑布流左边数据-->
  54.     <view class='box_l'>
  55.       <navigator wx:for="{{pubuliuResultsList.listL}}" class="list" url="{{item.linkUrl}}" open-type="navigate" hover-class="none">
  56.         <image mode='widthFix' src="{{item.src}}"  />
  57.         <view class='list_title'>{{item.title}}</view>
  58.         <view class='list_user f_24'>
  59.           <image src='{{item.userhead}}' mode='widthFix'></image>
  60.           <text class='list_user_name'>{{item.nickname}}</text>
  61.           
  62.           <text class='list_zan' data-id='{{item.id}}' data-ifzan='{{item.ifzan}}' data-index='{{index}}' data-side='listL' catchtap='dianzan'>
  63.             <text wx:if="{{item.ifzan}}" class='iconfont icon-xinheart280 f_30'></text>
  64.             <text wx:esle class='iconfont icon-xinheart281 f_30'></text>
  65.           </text>
  66.  
  67.           <text>{{item.zannum}}</text>
  68.         </view>
  69.         <text>{{item.key}}</text>
  70.       </navigator>
  71.     </view>
  72.  
  73.     <!--瀑布流右边数据-->
  74.     <view class='box_r'>
  75.       <navigator wx:for="{{pubuliuResultsList.listR}}" class="list" url="{{item.linkUrl}}" open-type="navigate" hover-class="none">
  76.         <image mode='widthFix' src="{{item.src}}"  />
  77.         <view class='list_title'>{{item.title}}</view>
  78.         <view class='list_user f_24'>
  79.           <image src='{{item.userhead}}' mode='widthFix'></image>
  80.           <text class='list_user_name'>{{item.nickname}}</text>
  81.           
  82.           <text class='list_zan' data-id='{{item.id}}' data-ifzan='{{item.ifzan}}' data-index='{{index}}' data-side='listR' catchtap='dianzan'>
  83.             <text wx:if="{{item.ifzan}}" class='iconfont icon-xinheart280 f_30'></text>
  84.             <text wx:esle class='iconfont icon-xinheart281 f_30'></text>
  85.           </text>
  86.  
  87.           <text>{{item.zannum}}</text>
  88.         </view>
  89.         <text>{{item.key}}</text>
  90.       </navigator>
  91.     </view>
  92.  
  93.   </view>
  94.  
  95.  
  96.   <view wx:if="{{!ifHaveMore && pubuliuResultsList.listL[0]}}" class='showNoMore'>我是有底线哒</view>
  97.  
  98.  
  99. </scroll-view>
  100.

index.wxss

  1. /* pages/test/index.wxss */
  2. @font-face {font-family: "iconfont";
  3.   src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMMAAsAAAAABygAAAK/AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqCDIIMATYCJAMMCwgABCAFhG0HQxtXBhEVlBtkPxJs3OJiZX3TRZXQIr0Jolr7t2d3PwAqRrAYUECawX+ViooCQPUqGvgaIIAA7+V0DBejXqgsxfV861k+45OO+X3WeZxGKYRESIw4nDbF5wPlsuawOh8TMMGAxtoUWenExLxleK1L6aA2QwBnwiWQiqqGDhwxkF4CyMLs9CiOOT2mJVNwRLCvmWiQo9jhqPapu8CR8PHylbQcQWGnIQNbpionKLHdsd3Vu6xdDPgEBPNZAXUaaCABGJCuWnsLOo4n0DjbcUME9tVKwHbXsrDd8fm7/cMDQYHYQ9JdAYgBmbojAZdzawKYggJAA2AfJxuAbUz1HSio4ODA0auxufnX4190v2BPeFqef+54/rFjV9izZ53PagfMvfjSGRv/4lPnrtCnTztopKHpeddzfMipa2k7qw4OqzutZfVNHd2rN/za7yU6fU7Ye/E0vKOEfU5vE2/6t6/e6Oiub6JbA2fleNt+4egxrbnGfiEdEH3Ft2H+fGtHXUNz6eHDwAk5mJOf69twhREArP36vV7HvxBA4HHB2r9hj4Jvji4GgFdub34jn7Xf0N+I4805BH60oGeZcUTEoI3F53zPqUkbaVUAXM2FBXF7ez9e6dc7HQRH/FIoHAiDxpEIoqEmwA4XMmCPI8XQOotXTXfhg+zJnIA4bwTh6QPF3S1onr5EQ/3Bjr8/7Hm2h7OufBZ0EVUjygkdYwT/giZMY2ImFlHmEfOtd5QVhbQr0tqEwEhdTFU4Is0xZL1ny5wg0TRAibbDvp9gpqnFwLJmngulUt2NZJiGjVCOIIehCHgvoBFMRsmvzUTp/kcou+k51JLVZr9CZNXUDwxJ9yBW8rFX1r1cs7rLLMYSkJDJAJSoHer1JmCub9dCAZPqEdFZQdFqqa9crq8cPiBPzYN8VadEi8HlzVijI7YHndrMZgMA') format('woff2'),
  4.   url('//at.alicdn.com/t/font_1209810_s2iq0eomwkc.woff?t=1558690554699') format('woff'),
  5.   url('//at.alicdn.com/t/font_1209810_s2iq0eomwkc.ttf?t=1558690554699') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  6.   url('//at.alicdn.com/t/font_1209810_s2iq0eomwkc.svg?t=1558690554699#iconfont') format('svg'); /* iOS 4.1- */
  7. }
  8. .iconfont {
  9.   font-family: "iconfont" !important;
  10.   font-style: normal;
  11.   -webkit-font-smoothing: antialiased;
  12.   -moz-osx-font-smoothing: grayscale;
  13. }
  14. .icon-xinheart280:before {
  15.   content: "\e9cb";
  16. }
  17. .icon-xinheart281:before {
  18.   content: "\e9cc";
  19. }
  20.  
  21.  
  22.  
  23. page {
  24.   height: 100%;
  25.   font-size: 26rpx;
  26.   line-height: 1.5;
  27. }
  28. image{ vertical-align: middle;}
  29.  
  30.  
  31.  
  32. .nav_box{ width: 100%; background-color: #fff;}
  33. .nav_box.nav_body_top{ overflow: hidden; position: fixed; left: 0; top: 0; z-index: 999;}
  34.  
  35. .nav_body{ width: auto; padding: 22rpx 0; margin: 0 auto; position: relative;
  36. 			display: flex; justify-content: flex-start; align-items: center;
  37. }
  38. .nav_body:before{ content: ""; width: 100%; min-width: 750rpx; height: 1px; background-color: #ddd; position: absolute; left: 50%; bottom: 0;
  39. 				-webkit-transform: translateX(-50%);
  40. 						transform: translateX(-50%);
  41. }
  42. .nav_body:after{ content: ""; width: 124rpx; height: 1.5px; background-color: #fc2549; position: absolute; left: ; bottom: 0;
  43. 				-webkit-transition:all linear .3s;
  44. 						transition:all linear .3s;
  45. }
  46. .nav_li{ width: 150rpx; height: 52rpx; line-height: 52rpx; text-align: center; color: #000; font-size: 26rpx; position: relative;
  47. 				-webkit-transition:all linear .3s;
  48. 						transition:all linear .3s;
  49. }
  50. .nav_li:not(:first-child):after{ content: ""; width: 1px; height: 100%; background-color: #ddd; position: absolute; left: 0; top: 0;}
  51.  
  52. .nav_body.nav_body_cur0 .nav_li:nth-child(1) ,
  53. .nav_body.nav_body_cur1 .nav_li:nth-child(2) ,
  54. .nav_body.nav_body_cur2 .nav_li:nth-child(3) ,
  55. .nav_body.nav_body_cur3 .nav_li:nth-child(4) ,
  56. .nav_body.nav_body_cur4 .nav_li:nth-child(5) ,
  57. .nav_body.nav_body_cur5 .nav_li:nth-child(6) ,
  58. .nav_body.nav_body_cur6 .nav_li:nth-child(7) ,
  59. .nav_body.nav_body_cur7 .nav_li:nth-child(8) ,
  60. .nav_body.nav_body_cur8 .nav_li:nth-child(9) ,
  61. .nav_body.nav_body_cur9 .nav_li:nth-child(10){ color: #fc2549; font-weight: bold;}
  62. .nav_body.nav_body_cur0:after{ left: calc((150rpx - 124rpx) / 2);}
  63. .nav_body.nav_body_cur1:after{ left: calc(150rpx + (150rpx - 124rpx) / 2);}
  64. .nav_body.nav_body_cur2:after{ left: calc(150rpx * 2 + (150rpx - 124rpx) / 2);}
  65. .nav_body.nav_body_cur3:after{ left: calc(150rpx * 3 + (150rpx - 124rpx) / 2);}
  66. .nav_body.nav_body_cur4:after{ left: calc(150rpx * 4 + (150rpx - 124rpx) / 2);}
  67. .nav_body.nav_body_cur5:after{ left: calc(150rpx * 5 + (150rpx - 124rpx) / 2);}
  68. .nav_body.nav_body_cur6:after{ left: calc(150rpx * 6 + (150rpx - 124rpx) / 2);}
  69. .nav_body.nav_body_cur7:after{ left: calc(150rpx * 7 + (150rpx - 124rpx) / 2);}
  70. .nav_body.nav_body_cur8:after{ left: calc(150rpx * 8 + (150rpx - 124rpx) / 2);}
  71. .nav_body.nav_body_cur9:after{ left: calc(150rpx * 9 + (150rpx - 124rpx) / 2);}
  72. .nav_body.nav_body_cur10:after{ left: calc(150rpx * 10 + (150rpx - 124rpx) / 2);}
  73.  
  74.  
  75.  
  76. .showNoMore{ padding: 20rpx 0; text-align: center; color: #aaa;}
  77. .showNoMore:before{ content: ""; display: inline-block; vertical-align: middle; width: 150rpx; height: 1px; margin: 0 15rpx; background-color: #ddd;}
  78. .showNoMore:after{ content: ""; display: inline-block; vertical-align: middle; width: 150rpx; height: 1px; margin: 0 15rpx; background-color: #ddd;}
  79.  
  80.  
  81.  
  82. .body{ height: 100%; background-color: #f4f8fb;}
  83.  
  84. .swiper{ padding: 0 20rpx; background-color: #fff;}
  85. swiper{ height: 350rpx; margin: 0 auto; overflow: hidden;}
  86. swiper image{ width: 100%;}
  87.  
  88. /* 列表 */
  89. .get_pubu_img{ display: none;}
  90.  
  91. .box{ margin-top: 20rpx; display: flex; flex-wrap: wrap; flex-direction: row; justify-content:flex-start; align-items: flex-start; position: relative;}
  92.  
  93. .no_data_show{ width: 100%; min-height: calc(100vh - 500rpx); margin: 0 auto; text-align: center; font-size: 36rpx; font-weight: bold; background-color: #fff; display: flex; justify-content: center; align-items: center;}
  94.  
  95. .box_l , .box_r{ width: 345rpx; margin-left: 20rpx;}
  96.  
  97. .list{ width:100%; margin-bottom: 20rpx; padding-bottom: 10rpx; border-radius: 10rpx; background-color: #fff; position: relative; overflow: hidden;
  98.     -webkit-box-shadow: 2rpx 5rpx 10rpx rgba(0,0,0,.1);
  99.             box-shadow: 2rpx 5rpx 10rpx rgba(0,0,0,.1);
  100. }
  101. .list > image{ width: 100%;/* border-top-left-radius: 10rpx; border-top-right-radius: 10rpx;*/}
  102. .list_title{ height: 64rpx; line-height: 64rpx; padding: 0 20rpx; color: #4c4c4c; overflow: hidden; white-space:nowrap; text-overflow: ellipsis;}
  103. .list_user{ height: 70rpx; padding: 0 20rpx; color: #989898;
  104.           display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
  105. }
  106. .list_user image{ width: 50rpx; margin-right: 10rpx; border-radius: 50%;}
  107. .list_user_name{ width: 150rpx; margin-right: 10rpx; overflow: hidden; white-space:nowrap; text-overflow: ellipsis;}
  108.  
  109. .list_zan{ display: inline-block; vertical-align: middle; width: 30rpx; height: 30rpx; margin-right: 10rpx; position: relative; top: -4rpx;}
  110. .list_zan .iconfont{ width: 30rpx; height: 3rpx; position: absolute; left: 0; top: 0;}

index.js

  1. // pages/test/index.js
  2.  
  3. var app = getApp()
  4. var leftHstart = 0, rightHstart = 0; //加载下页瀑布流数据时，前面数据的左右盒子高度
  5. var newImgData = []; //处理瀑布流所需变量
  6. var canLoadNextPage = false;
  7.  
  8. var scrollTopH; //获取顶部高度，用于设置浮动顶部的菜单（不同尺寸手机，高度不同）
  9.  
  10. var touchLRnum = 100; //列表区域左右滑动的距离（切换菜单的值）
  11.  
  12. Page({
  13.  
  14.   /**
  15.    * 页面的初始数据
  16.    */
  17.   data: {
  18.     navList: ['首页','菜单1','菜单2','菜单3','菜单444','菜单555','菜单666','菜单777','菜单8','菜单9','菜单10'],
  19.     navIndex: 0, //当前选择的菜单key(对应 navList[key] 菜单内容) 
  20.     ifShowTopNav: false, //是否显示浮动的顶部菜单
  21.     pageSize: 1, //页码
  22.     ifHaveMore: true, //是否还有下一页
  23. 		moveLeft: 'left:0px;', //列表处左右滑动时位移值
  24. 		ifCanScroll: true, //列表处左右滑动时设为false，这样页面不会滚动影响页面体验
  25.  
  26.  
  27.  
  28.     //KV图相关配置
  29.     indicatordots: true,
  30.     indicatorcolor: '#989898',
  31.     indicatoractivecolor: '#fc2549',
  32.     autoplay: true,
  33.     interval: 3000,
  34.     duration: 500,
  35. 		//swiperImgArr: [], //KV图数据
  36.  
  37.     //列表
  38.     //pubuliuNewArrData:[], //最新一次获取到的 瀑布流JSON数据 转成 的 数组
  39.     //pubuliuResultsList:{
  40.     //  listL: [],
  41.     //  listR: [],
  42.     //}
  43.   },
  44.  
  45.   /**
  46.    * 生命周期函数--监听页面加载
  47.    */
  48.   onLoad: function (options) {
  49.     let This = this;
  50.  
  51.     This.getKVimg(); //获取  KV图  列表
  52.  
  53.     This.initFun(); //初始化 / 清空 页面数据
  54.     This.getListData(); //获取页面列表数据
  55.   },
  56.  
  57.   /**
  58.    * 生命周期函数--监听页面显示
  59.    */
  60.   onShow: function () {
  61.     //获取顶部高度，用于设置浮动顶部的菜单（不同尺寸手机，高度不同）
  62. 		//延迟执行是为了防止导航栏以上有些元素未加载成功会影响高度计算（最好是在导航栏以上元素请求加载成功后处执行以下代码）
  63. 		setTimeout(function(){
  64. 				let query = wx.createSelectorQuery();
  65. 				query.select('#top').boundingClientRect()
  66. 				query.exec(function (res) {
  67. 					scrollTopH = res[0].height;
  68. 				})
  69. 		},1500);
  70.   },
  71.  
  72.   /**
  73.    * 生命周期函数--监听页面初次渲染完成
  74.    */
  75.   onReady: function () {
  76.  
  77.   },
  78.  
  79.   /**
  80.    * 生命周期函数--监听页面隐藏
  81.    */
  82.   onHide: function () {
  83.  
  84.   },
  85.  
  86.   /**
  87.    * 生命周期函数--监听页面卸载
  88.    */
  89.   onUnload: function () {
  90.  
  91.   },
  92.  
  93.   /**
  94.    * 页面相关事件处理函数--监听用户下拉动作
  95.    */
  96.   onPullDownRefresh: function () {
  97.  
  98.   },
  99.  
  100.   /**
  101.    * 用户点击右上角分享
  102.    */
  103.   onShareAppMessage: function () {
  104.  
  105.   },
  106.  
  107.  
  108.  
  109.  
  110.   //初始化 / 清空 页面数据
  111.   initFun: function () {
  112.     let This = this;
  113.     leftHstart = 0, rightHstart = 0; //加载下页瀑布流数据时，前面数据的左右盒子高度
  114.     newImgData = []; //处理瀑布流所需变量
  115.  
  116.     This.setData({
  117.       //swiperImgArr: '',
  118.       //navIndex: 0,
  119.  
  120.       pageSize: 1, //页码
  121.  
  122.       pubuliuNewArrData: '',
  123.       pubuliuResultsList: '',
  124.  
  125.     });
  126.   },
  127.  
  128.  
  129.  
  130.  
  131.   //获取  KV图  列表
  132.   getKVimg: function () {
  133.     let This = this;
  134.     This.setData({
  135.       swiperImgArr: [
  136.         { src: 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640', linkUrl: '' },
  137.         { src: 'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640', linkUrl: '' },
  138.         { src: 'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640', linkUrl: '' },
  139.       ],
  140.     });
  141.   },
  142.  
  143.  
  144.  
  145.  
  146.   //设置顶部固定菜单定位
  147. //  onPageScroll:function(e){ // 获取滚动条当前位置
  148. //    console.log(e.scrollTop)
  149.   scrollIn: function (e) {
  150.     let This = this;
  151.     if (e.detail.scrollTop >= scrollTopH) {
  152.       if (!This.data.ifShowTopNav) {
  153.         This.setData({
  154.           ifShowTopNav: true
  155.         });
  156.       }
  157.     } else {
  158.       if (This.data.ifShowTopNav) {
  159.         This.setData({
  160.           ifShowTopNav: false
  161.         });
  162.       }
  163.     }
  164.   },
  165.  
  166.  
  167.  
  168.   //左右滑动 切换菜单
  169.   touchStart: function (e) {
  170.     if (e.touches.length == 1) {
  171.       let This = this;
  172.  
  173.       This.setData({
  174.         startX: e.touches[0].clientX,
  175.         startY: e.touches[0].clientY,
  176.       });
  177.     }
  178.   },
  179.   touchMove: function (e) {
  180.     if (e.touches.length == 1) {
  181.       let This = this;
  182.  
  183.       let moveX = e.touches[0].clientX;
  184.       let diffX = This.data.startX - moveX;
  185.  
  186.       let moveY = e.touches[0].clientY;
  187.       let diffY = This.data.startY - moveY;
  188.  
  189.       let moveLeft = 'left:0px;';
  190.  
  191.       if (Math.abs(diffY) < Math.abs(diffX)) {
  192.         if (diffX < 0 && This.data.navIndex > 0) { //向右
  193.           //moveLeft = 'left:' + -(diffX < touchLRnum ? -touchLRnum : diffX) + 'px;';
  194. 					moveLeft = 'left:' + -diffX + 'px;';
  195.         } else if (diffX > 0 && This.data.navIndex < This.data.navList.length - 1) { //向左
  196.           //moveLeft = 'left:-' + (diffX > touchLRnum ? touchLRnum : diffX) + 'px;';
  197. 					moveLeft = 'left:-' + diffX + 'px;';
  198.         }
  199. 				
  200. 				This.setData({
  201. 					ifCanScroll: false, //列表处左右滑动时设为false，这样页面不会滚动影响页面体验
  202. 				});
  203.       }else{
  204. 				This.setData({
  205. 					ifCanScroll: true, //列表处左右滑动时设为false，这样页面不会滚动影响页面体验
  206. 				});
  207. 			}
  208.  
  209.       This.setData({
  210.         moveLeft: moveLeft
  211.       });
  212.     }
  213.   },
  214.   touchEnd: function (e) {
  215.     if (e.changedTouches.length == 1) {
  216.       let This = this;
  217.  
  218.       let endX = e.changedTouches[0].clientX;
  219.       let diffX = This.data.startX - endX;
  220.  
  221.       let endY = e.changedTouches[0].clientY;
  222.       let diffY = This.data.startY - endY;
  223.  
  224.       let moveLeft = 'left:0px;';
  225.  
  226.       if (Math.abs(diffY) < Math.abs(diffX)) {
  227.         if (diffX < 0 && diffX < -touchLRnum && This.data.navIndex > 0) { //向右
  228.           let moveEndNavIndex = This.data.navIndex - 1;
  229.           This.setData({
  230.             navIndex: moveEndNavIndex
  231.           });
  232.  
  233.           This.initFun(); //初始化 / 清空 页面数据
  234.           This.getListData(); //获取页面列表数据
  235.  
  236.         } else if (diffX > 0 && diffX > touchLRnum && This.data.navIndex < This.data.navList.length - 1) { //向左
  237.           let moveEndNavIndex = This.data.navIndex + 1;
  238.           This.setData({
  239.             navIndex: moveEndNavIndex
  240.           });
  241.  
  242.           This.initFun(); //初始化 / 清空 页面数据
  243.           This.getListData(); //获取页面列表数据
  244.  
  245.         }
  246.       }
  247.  
  248.  
  249.       This.setData({
  250.         moveLeft: moveLeft,
  251. 				ifCanScroll: true, //列表处左右滑动时设为false，这样页面不会滚动影响页面体验
  252.       });
  253.     }
  254.   },
  255.  
  256.  
  257.  
  258.  
  259.   //选择 切换菜单
  260.   changeTitle: function (e) {
  261.     let chooseNav = e.currentTarget.dataset.type;
  262.     let This = this;
  263.     if (chooseNav != This.data.navIndex){
  264.       This.setData({
  265.         navIndex: chooseNav,
  266.       });
  267.  
  268.       This.initFun(); //初始化 / 清空 页面数据
  269.       This.getListData(); //获取页面列表数据
  270.     }
  271.   },
  272.  
  273.  
  274.  
  275.  
  276.   /**
  277.    * 页面上拉触底事件的处理函数
  278.    */
  279. //  onReachBottom: function () {
  280.   scrollEnd: function () { //滚动到底部加载更多
  281.     let This = this;
  282.     if (This.data.ifHaveMore) {
  283.       //console.log('加载一下页');
  284.       if (!canLoadNextPage) {
  285.         return;
  286.       }
  287.       newImgData = [];
  288.       This.setData({
  289.         pubuliuNewArrData: '',
  290.         pageSize: This.data.pageSize + 1
  291.       });
  292.  
  293.       This.getListData(); //获取页面列表数据
  294.     }
  295.   },
  296.  
  297.  
  298.  
  299.  
  300.   //获取页面列表数据
  301.   getListData: function () {
  302.     let This = this;
  303.  
  304.     wx.showLoading({
  305.       title: '加载中',
  306. 			mask:true
  307.     })
  308.  
  309.     //查询数据 所需参数
  310.     let dataJson = {
  311.       type: This.data.navIndex,
  312.       page: This.data.pageSize, //页码
  313.     }
  314.  
  315.  
  316.     /*test*/
  317.     let res = {
  318.       status: 1,
  319.       ifHaveMore: This.data.pageSize > 2 ? false : true, //是否还有下一页
  320.       list: {
  321.         0: {
  322.           id: '001',
  323.           title: This.data.navList[This.data.navIndex] + ' - ' + This.data.pageSize + '页 - 1111111',
  324.           userhead: 'https://iconfont.alicdn.com/t/1550898018467.jpeg@100h_100w.jpg',
  325.           nickname: '昵称昵称昵称111',
  326.           zannum: 88,
  327.           ifzan: true,
  328.           src: "https://img.t.sinajs.cn/t5/skin/public/profile_cover/001_s.jpg?version=b97b8caee54a6c78",
  329.           linkUrl: '/pages/detail/detail'
  330.         },
  331.         1: {
  332.           id: '002',
  333.           title: This.data.pageSize + '页222222222222',
  334.           userhead: 'https://avatar.csdn.net/D/5/3/3_qq_16494241.jpg',
  335.           nickname: '昵称昵称昵称222',
  336.           zannum: 88,
  337.           ifzan: false,
  338.           src: "https://img2018.cnblogs.com/news/24442/201902/24442-20190214124232223-959977867.jpg",
  339.           linkUrl: '/pages/detail/detail'
  340.         },
  341.         2: {
  342.           id: '003',
  343.           title: This.data.pageSize + '页33333333333333',
  344.           userhead: 'https://avatar.csdn.net/D/5/3/3_qq_16494241.jpg',
  345.           nickname: '昵称昵称昵称333',
  346.           zannum: 88,
  347.           ifzan: false,
  348.           src: "https://s3.ifanr.com/wp-content/uploads/2018/08/211.jpg!720",
  349.           linkUrl: '/pages/detail/detail'
  350.         },
  351.         3: {
  352.           id: '004',
  353.           title: This.data.pageSize + '页44444444444444',
  354.           userhead: 'https://iconfont.alicdn.com/t/1550898018467.jpeg@100h_100w.jpg',
  355.           nickname: '昵称昵称昵称444',
  356.           zannum: 88,
  357.           ifzan: true,
  358.           src: "https://t1.hddhhn.com/uploads/tu/201512/14/87.jpg",
  359.           linkUrl: '/pages/detail/detail'
  360.         },
  361.       }
  362.     }
  363.  
  364.     if (res.status == 1) {
  365.       This.setData({
  366.         ifHaveMore: res.ifHaveMore, //是否还有下一页
  367.         pubuliuNewArrData: app.setCurNewPubuImgData(res.list) //处理设置最新获取到的瀑布流数据
  368.       });
  369.     }
  370.  
  371.     setTimeout(function () {
  372.       wx.hideLoading();
  373.     }, 500)
  374.     /*test*/
  375.  
  376.     return;
  377.  
  378.     //请求获取数据
  379.     wx.request({
  380.       url: '获取列表数据', //仅为示例，并非真实的接口地址
  381.       data: dataJson,
  382.       header: {
  383.         'content-type': 'application/json' // 默认值
  384.       },
  385.       success(res) {
  386.  
  387.         wx.hideLoading();
  388.       }
  389.     })
  390.   },
  391.  
  392.  
  393.  
  394.  
  395.   /*
  396.   瀑布流相关处理:
  397.   1、处理最新加载的瀑布流数据中图片，先显示，再根据 bindload 获取 并 存储 与 原来KEY 相对应的 等宽情况下的高度 数组
  398.      => newImgData[key].h （key 与最新加载的JSON数据的 key 相同）
  399.   2、根据所有图片加载完成后，调用app.js中方法，设置左、右两边数据
  400.   */
  401.   pubuImgLoad: function (e) {
  402.     let This = this;
  403.     let inListIndex = e.currentTarget.dataset.key;
  404.     //console.log(e.detail.width);
  405.     //console.log(inListIndex);
  406.     newImgData[inListIndex] = {};
  407.     newImgData[inListIndex].h = (300 / e.detail.width) * e.detail.height;
  408.     if (newImgData.length == This.data.pubuliuNewArrData.length) {
  409.       //防止最后一个数据中的图片先加载完成，这样lenth也相等
  410.       for (let i = 0; i < newImgData.length; i++) {
  411.         if (!newImgData[i]) {
  412.           return;
  413.         }
  414.       }
  415.       //newImgData 获取的最新数据 - newImgData[key].h （key 与最新加载的JSON数据的 key 相同）
  416.       //This.data.pubuliuNewArrData 获取的最新数据（处理过的数组） - This.data.pubuliuNewArrData[key]. （key 与最新加载的JSON数据的 key 相同）
  417.       //leftHstart 本次数据加载 前 的 左 边高度
  418.       //rightHstart 本次数据加载 前 的 右 边高度
  419.       app.setCurResultsPubuImgData(newImgData, This.data.pubuliuNewArrData, leftHstart, rightHstart, function (pubuliuResultsList, leftH, rightH) {
  420.         //console.log(pubuliuResultsList);
  421.         leftHstart = leftH;
  422.         rightHstart = rightH;
  423.  
  424.         if (This.data.pubuliuResultsList) {
  425.           pubuliuResultsList.listL = This.data.pubuliuResultsList.listL.concat(pubuliuResultsList.listL);
  426.           pubuliuResultsList.listR = This.data.pubuliuResultsList.listR.concat(pubuliuResultsList.listR);
  427.         }
  428.  
  429.         This.setData({
  430.           pubuliuResultsList: pubuliuResultsList
  431.         });
  432.         setTimeout(function () {
  433.           canLoadNextPage = true;
  434.         }, 500);
  435.       })
  436.     }
  437.   },
  438.  
  439.  
  440.  
  441.  
  442.   // 点赞、取消赞
  443.   dianzan: function (e) {
  444.     // console.log(e.currentTarget.dataset.id); //对应数据库ID   用来更新数据库中对应 赞 的
  445.     // console.log(e.currentTarget.dataset.ifzan); //当前用户是否赞过
  446.     // console.log(e.currentTarget.dataset.side); //listL（左边数据） | listR（右边数据）
  447.     // console.log(e.currentTarget.dataset.index); //对应当前页面key（左、右边）   用来更新页面上显示样式的
  448.  
  449.     let This = this;
  450.  
  451.     wx.showLoading({
  452.       title: '点赞中',
  453. 			mask:true
  454.     })
  455.  
  456.     //查询数据 所需参数
  457.     let dataJson = {
  458.       id: e.currentTarget.dataset.id, //对应数据库ID   用来更新数据库中对应 赞 的
  459.       ifzan: e.currentTarget.dataset.ifzan, //当前用户是否赞过
  460.     }
  461.  
  462.  
  463.     /*test*/
  464.     let res = {
  465.       status: 1,
  466. 			zannum:This.data.pubuliuResultsList[e.currentTarget.dataset.side][e.currentTarget.dataset.index].zannum == 88 ? 999 : 88 , //点赞、取消赞后 的 赞数量
  467.       ifzan: !dataJson.ifzan,
  468.       info: '是否成功提示文本'
  469.     }
  470.  
  471.     if (res.status == 1) {
  472.       let tempData = This.data.pubuliuResultsList;
  473.       tempData[e.currentTarget.dataset.side][e.currentTarget.dataset.index].ifzan = res.ifzan;
  474. 			tempData[e.currentTarget.dataset.side][e.currentTarget.dataset.index].zannum = res.zannum;
  475.       This.setData({
  476.         pubuliuResultsList: tempData
  477.       });
  478.     } else {
  479.     }
  480. 		setTimeout(function(){
  481. 			wx.showToast({
  482. 				title: res.info,
  483. 				icon: 'success',
  484. 				duration: 800
  485. 			})
  486. 			//wx.hideLoading();
  487. 		},500)
  488. 		
  489.     /*test*/
  490.  
  491.     return;
  492.  
  493.     //请求获取数据
  494.     wx.request({
  495.       url: '获取列表数据', //仅为示例，并非真实的接口地址
  496.       data: dataJson,
  497.       header: {
  498.         'content-type': 'application/json' // 默认值
  499.       },
  500.       success(res) {
  501. 				
  502.       }
  503.     })
  504.   },
  505.  
  506. })

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/565654
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号