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

.swan

<view class="page">
    <!-- 左边S -->
    <view class="page-left" style="height:{{scrollH}}px">
        <scroll-view scroll-y="true" class="List" style="height:{{scrollH}}px" scroll-top="{= scrollTop =}">
            <block s-for="item,index in goodsClassName">
                <view data-index="{{index}}" data-name="{{item.name}}"
                    class="List-item {{activeIndex == index ? 'List-item-on' : ' '}}" bindtap="tabClick">{{item.title}}
                </view>
            </block>
        </scroll-view>
    </view>
    <!-- 左边E -->
    <!-- 右边S -->
    <view class="page-right" style="height:{{scrollH}}px">
            <scroll-view scroll-y="true" class="content-item" style="height:{{scrollH}}px" bindscrolltolower="bindscrolltolower">
            <view class="page__bd" style="overflow:hidden;">
                <block s-for="item,index in DataInfo">
                    <view class="goods-item">
                    <navigator  url="/pages/detail/detail?id={{item.id}}">
                        <view class="goods-item-img"><image src="{{item.cover_id}}" mode="widthFix" lazy-load="true" ></image></view>
                        <view class="goods-item-title"><text>{{item.title}}</text></view>
                    </navigator>
                    </view>
                </block>
            </view>
            <!-- 数据加载模态框 S-->
            <view class="page__bd" style="margin-top:30rpx;">
                <view class="weui-loadmore" hidden="{{!falg}}">
                    <view class="weui-loading"></view>
                    <view class="weui-loadmore__tips">正在加载</view>
                </view>
                <view class="weui-loadmore weui-loadmore_line" hidden="{{falg}}">
                    <view class="weui-loadmore__tips weui-loadmore__tips_in-line">暂无数据</view>
                </view>
            </view>
            <!-- 数据加载模态框 E-->
            </scroll-view>
    </view>
    <!-- 右边E -->
</view>

.css 为什么要设置 fixed ,不固定 上下滑动时就会 出现空白区域

.page{width:100%;background:#eee;height:100vh;overflow:hidden;position:fixed;left:0;bottom:0}
.page-left{width:25%;float:left;background-color:#f3f3f3;height:100vh;overflow:hidden}
.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}
.List-item-on{color:#323232;background-color:#ffffff;box-shadow:0rpx 0rpx 1rpx 0rpx rgba(39,39,39,0.15);position:relative}
.List-item-on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6rpx;height:53rpx;background-color:#b1742a}
.page-right{width:75%;float:left;height:100vh;background:#fff;overflow:hidden}
.content-item{width:100%;overflow:hidden;padding:8px;box-sizing:border-box}
.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}
.goods-item:nth-of-type(2n){margin-right:0}
.goods-item-img{width:100%;overflow:hidden}
.goods-item-img image{width:100%;display:block}
.goods-item-title{width:100%;height:50px;line-height:50px}
.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

const app = getApp();
Page({
    data: {
        goodsClassName: [],
        activeIndex: 0,
        scrollH: 0,
        scrollTop: 0,
        DataInfo: [],
        ClassName: "",
        falg: true,
        PageN: 1,
    },
    onLoad: function() {
        this.getClass();
        swan.getSystemInfo({
            success: (res) = >{
                let ww = res.windowWidth;
                let wh = res.windowHeight;
                let scrollH = wh;
                this.setData({
                    scrollH: scrollH,
                })
            }
        })
    },
    tabClick: function(e) {
        console.log(e);
        this.setData({
            scrollTop: e.target.offsetTop,
            activeIndex: e.currentTarget.dataset.index,
            ClassName: e.currentTarget.dataset.name,
            DataInfo: [],
            PageN: 1,
            falg: true,
        });
        this.getInfo(this.data.ClassName);
        console.log('切换之后' + this.data.PageN)
    },
    onReady: function() {},
    onShow: function() {
        app.setInfo()
    },
    onHide: function() {},
    onUnload: function() {},
    onPullDownRefresh: function() {},
    onReachBottom: function() {},
    onShareAppMessage: function() {},
    bindscrolltolower: function() {
        this.getInfo(this.data.ClassName)
    },
    getClass: function() {
        var that = this;
        var index = this.data.activeIndex;
        swan.request({
            url: app.globalData.baseUrl + 'list/product',
            method: 'GET',
            data: {},
            header: {
                genToken: app.globalData.genToken,
            },
            success: function(res) {
                console.log(res);
                if (res.data) {
                    swan.hideToast();
                    that.setData({
                        goodsClassName: res.data.cates,
                    })
                }
                console.log(that.data.goodsClassName);
                console.log(that.data.goodsClassName[index].name);
                that.setData({
                    ClassName: that.data.goodsClassName[index].name
                }) that.getInfo(that.data.ClassName)
            },
            fail: function(err) {
                console.log('错误码：' + err.errCode);
                console.log('错误信息：' + err.errMsg)
            }
        })
    },
    getInfo: function(ClassName) {
        if (this.data.falg) {
            var that = this;
            swan.showToast({
                title: '数据加载中',
                icon: 'loading',
                duration: 5000,
            });
            swan.request({
                url: app.globalData.baseUrl + 'list/' + ClassName,
                method: 'GET',
                data: {
                    p: that.data.PageN
                },
                header: {
                    genToken: app.globalData.genToken
                },
                success: function(res) {
                    console.log(res);
                    swan.hideToast();
                    if (res.data.lines.length < 1) {
                        swan.showToast({
                            title: '已全部加载！',
                            icon: 'none',
                            duration: 1000,
                        });
                        that.setData({
                            falg: false
                        })
                    } else {
                        let arr = res.data.lines;
                        that.setData({
                            DataInfo: that.data.DataInfo.concat(arr),
                            falg: true
                        })
                    };
                    if (res.data.lines.length < 6) {
                        that.setData({
                            falg: false
                        })
                    }
                },
                fail: function(err) {
                    swan.showToast({
                        title: '网络好像出问题了！',
                        icon: 'loading',
                        duration: 3000,
                    });
                    console.log('错误码：' + err.errCode);
                    console.log('错误信息：' + err.errMsg)
                },
                complete: function() {
                    that.setData({
                        PageN: that.data.PageN + 1,
                    });
                    console.log('当前页码' + that.data.PageN)
                }
            })
        } else {
            swan.showToast({
                title: '已全部加载！',
                icon: 'none',
                duration: 1000,
            })
        }
    },
});

效果图