百度小程序-左侧滑动列表,点击分类右侧显示对应数据
.swan
1 <view class="page"> 2 <!-- 左边S --> 3 <view class="page-left" style="height:{{scrollH}}px"> 4 <scroll-view scroll-y="true" class="List" style="height:{{scrollH}}px" scroll-top="{= scrollTop =}"> 5 <block s-for="item,index in goodsClassName"> 6 <view data-index="{{index}}" data-name="{{item.name}}" 7 class="List-item {{activeIndex == index ? 'List-item-on' : ' '}}" bindtap="tabClick">{{item.title}} 8 </view> 9 </block> 10 </scroll-view> 11 </view> 12 <!-- 左边E --> 13 <!-- 右边S --> 14 <view class="page-right" style="height:{{scrollH}}px"> 15 <scroll-view scroll-y="true" class="content-item" style="height:{{scrollH}}px" bindscrolltolower="bindscrolltolower"> 16 <view class="page__bd" style="overflow:hidden;"> 17 <block s-for="item,index in DataInfo"> 18 <view class="goods-item"> 19 <navigator url="/pages/detail/detail?id={{item.id}}"> 20 <view class="goods-item-img"><image src="{{item.cover_id}}" mode="widthFix" lazy-load="true" ></image></view> 21 <view class="goods-item-title"><text>{{item.title}}</text></view> 22 </navigator> 23 </view> 24 </block> 25 </view> 26 <!-- 数据加载模态框 S--> 27 <view class="page__bd" style="margin-top:30rpx;"> 28 <view class="weui-loadmore" hidden="{{!falg}}"> 29 <view class="weui-loading"></view> 30 <view class="weui-loadmore__tips">正在加载</view> 31 </view> 32 <view class="weui-loadmore weui-loadmore_line" hidden="{{falg}}"> 33 <view class="weui-loadmore__tips weui-loadmore__tips_in-line">暂无数据</view> 34 </view> 35 </view> 36 <!-- 数据加载模态框 E--> 37 </scroll-view> 38 </view> 39 <!-- 右边E --> 40 </view>
.css 为什么要设置 fixed ,不固定 上下滑动时就会 出现空白区域
1 .page{width:100%;background:#eee;height:100vh;overflow:hidden;position:fixed;left:0;bottom:0} 2 .page-left{width:25%;float:left;background-color:#f3f3f3;height:100vh;overflow:hidden} 3 .List-item{padding:34rpx 10rpx;text-align:center;color:#7f7f7f;font-size:24rpx;font-weight:normal;font-stretch:normal;letter-spacing:0rpx;box-sizing:border-box} 4 .List-item-on{color:#323232;background-color:#ffffff;box-shadow:0rpx 0rpx 1rpx 0rpx rgba(39,39,39,0.15);position:relative} 5 .List-item-on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6rpx;height:53rpx;background-color:#b1742a} 6 .page-right{width:75%;float:left;height:100vh;background:#fff;overflow:hidden} 7 .content-item{width:100%;overflow:hidden;padding:8px;box-sizing:border-box} 8 .goods-item{width:100%;background-color:#ffffff;box-shadow:0rpx 0rpx 6rpx 0rpx rgba(39,39,39,0.22);overflow:hidden;margin:0 2% 2% 0} 9 .goods-item:nth-of-type(2n){margin-right:0} 10 .goods-item-img{width:100%;overflow:hidden} 11 .goods-item-img image{width:100%;display:block} 12 .goods-item-title{width:100%;height:50px;line-height:50px} 13 .goods-item-title text{text-align:center;font-size:24rpx;font-weight:normal;font-stretch:normal;letter-spacing:0rpx;color:#515151;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;padding:0 20rpx 30rpx 20rpx}
.js
1 const app = getApp(); 2 Page({ 3 data: { 4 goodsClassName: [], 5 activeIndex: 0, 6 scrollH: 0, 7 scrollTop: 0, 8 DataInfo: [], 9 ClassName: "", 10 falg: true, 11 PageN: 1, 12 }, 13 onLoad: function() { 14 this.getClass(); 15 swan.getSystemInfo({ 16 success: (res) = >{ 17 let ww = res.windowWidth; 18 let wh = res.windowHeight; 19 let scrollH = wh; 20 this.setData({ 21 scrollH: scrollH, 22 }) 23 } 24 }) 25 }, 26 tabClick: function(e) { 27 console.log(e); 28 this.setData({ 29 scrollTop: e.target.offsetTop, 30 activeIndex: e.currentTarget.dataset.index, 31 ClassName: e.currentTarget.dataset.name, 32 DataInfo: [], 33 PageN: 1, 34 falg: true, 35 }); 36 this.getInfo(this.data.ClassName); 37 console.log('切换之后' + this.data.PageN) 38 }, 39 onReady: function() {}, 40 onShow: function() { 41 app.setInfo() 42 }, 43 onHide: function() {}, 44 onUnload: function() {}, 45 onPullDownRefresh: function() {}, 46 onReachBottom: function() {}, 47 onShareAppMessage: function() {}, 48 bindscrolltolower: function() { 49 this.getInfo(this.data.ClassName) 50 }, 51 getClass: function() { 52 var that = this; 53 var index = this.data.activeIndex; 54 swan.request({ 55 url: app.globalData.baseUrl + 'list/product', 56 method: 'GET', 57 data: {}, 58 header: { 59 genToken: app.globalData.genToken, 60 }, 61 success: function(res) { 62 console.log(res); 63 if (res.data) { 64 swan.hideToast(); 65 that.setData({ 66 goodsClassName: res.data.cates, 67 }) 68 } 69 console.log(that.data.goodsClassName); 70 console.log(that.data.goodsClassName[index].name); 71 that.setData({ 72 ClassName: that.data.goodsClassName[index].name 73 }) that.getInfo(that.data.ClassName) 74 }, 75 fail: function(err) { 76 console.log('错误码：' + err.errCode); 77 console.log('错误信息：' + err.errMsg) 78 } 79 }) 80 }, 81 getInfo: function(ClassName) { 82 if (this.data.falg) { 83 var that = this; 84 swan.showToast({ 85 title: '数据加载中', 86 icon: 'loading', 87 duration: 5000, 88 }); 89 swan.request({ 90 url: app.globalData.baseUrl + 'list/' + ClassName, 91 method: 'GET', 92 data: { 93 p: that.data.PageN 94 }, 95 header: { 96 genToken: app.globalData.genToken 97 }, 98 success: function(res) { 99 console.log(res); 100 swan.hideToast(); 101 if (res.data.lines.length < 1) { 102 swan.showToast({ 103 title: '已全部加载！', 104 icon: 'none', 105 duration: 1000, 106 }); 107 that.setData({ 108 falg: false 109 }) 110 } else { 111 let arr = res.data.lines; 112 that.setData({ 113 DataInfo: that.data.DataInfo.concat(arr), 114 falg: true 115 }) 116 }; 117 if (res.data.lines.length < 6) { 118 that.setData({ 119 falg: false 120 }) 121 } 122 }, 123 fail: function(err) { 124 swan.showToast({ 125 title: '网络好像出问题了！', 126 icon: 'loading', 127 duration: 3000, 128 }); 129 console.log('错误码：' + err.errCode); 130 console.log('错误信息：' + err.errMsg) 131 }, 132 complete: function() { 133 that.setData({ 134 PageN: that.data.PageN + 1, 135 }); 136 console.log('当前页码' + that.data.PageN) 137 } 138 }) 139 } else { 140 swan.showToast({ 141 title: '已全部加载！', 142 icon: 'none', 143 duration: 1000, 144 }) 145 } 146 }, 147 });
效果图
