百度小程序-左侧滑动列表,点击分类右侧显示对应数据

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

.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 });