小程序scroll-view上下滑的内部加左右滑，scroll-x生效的情况

今天做了下滑块里包含左右滑的效果，由于scroll-view 左右滑说的不够清楚，只能百度和看别人的例子了。还好scroll-view里面可以嵌套scroll-view，不然还要处理其他的问题。不啰嗦咯，上例子，由于例子的图片都不存在。所以就把图片注释掉了。复制粘贴看效果的呢需要自己添加点图片和数组哦。如果有不懂的可以评论，我记得会回复的。

<!--pages/cxtripHomePage/cxtripHomePage.wxml-->
<view class='shan-container'>
    <!-- 展示输入搜索框 -->
    <view class='show-search'>
        <view class='show-scan' catchtap='codeScan'>
            <!-- <image src='../img/cxtripHomePage/scan.png'></image> -->
        </view>
        <view class='show-big-search'>
            <view class='the-search'>
                <view class='input-search'>
                    <input type='text' class='input' confirm-type="search" bindinput="inputSearchContent" bindconfirm="searchProduct" placeholder='关键词' placeholder-style=''></input>
                </view>
                <view class='search-icon' catchtap='searchProduct'>
                    <!-- <image wx-if="{{}}" src='../img/cxtripHomePage/search.png'></image> -->
                </view>
            </view>
        </view>
        <view class='show-message' catchtap='messages'>
            <!-- <image wx-if="{{}}"  src='../img/cxtripHomePage/message.png'></image> -->
            <view class='weui-badge {{noRead ==0?"noneDisplay":""}}'>{{noRead}}</view>
        </view>
    </view>
    <!-- 上下滑设置 -->
    <scroll-view class='shan-content' scroll-y>
        <!-- banner -->
        <view class='banner'>
            <!-- <image src='../img/cxtripHomePage/banner.png' mode='aspectFill'></image> -->
        </view>
        <!-- 主营业务 左右滑位置-->
        <view class='business'>
            <view class='business-content box-shadow'>
                <scroll-view class='shan-scroll-x' scroll-x scroll-left="{{shanScrollLeft}}" bindscroll="nextOrPrev">
                    <view class='part-of-business' data-index="0" catchtap='navicationToWhere'>
                        <!-- <image src='../img/cxtripHomePage/train_car.png'></image> -->
                        <view>xxxx</view>
                    </view>
                    <view class='part-of-business' data-index="1" catchtap='navicationToWhere'>
                        <!-- <image src='../img/cxtripHomePage/ticket.png'></image> -->
                        <view>zzzzz</view>
                    </view>
                    <view class='part-of-business' data-index="2" catchtap='navicationToWhere'>
                        <!-- <image src='../img/cxtripHomePage/hotel.png'></image> -->
                        <view>saaaaaa</view>
                    </view>
                    <view class='part-of-business' data-index="3" catchtap='navicationToWhere'>
                        <!-- <image src='../img/cxtripHomePage/service.png'></image> -->
                        <view>qqqqq</view>
                    </view>
                     <view class='part-of-business' data-index="4" catchtap='navicationToWhere'>
                        <!-- <image src='../img/cxtripHomePage/specialty.png'></image> -->
                        <view>wereret</view>
                    </view>
                    <view class='part-of-business' data-index="5" catchtap='navicationToWhere'>
                        <!-- <image src='../img/cxtripHomePage/delicacy.png'></image> -->
                        <view>tuyuyjhjghh</view>
                    </view>
                </scroll-view>
                <view class='point'>
                    <view class='all-point'>
                        <view class='shan-point first {{pointActive?"pointActive":""}}' data-shanindex="1" catchtap='getLeftScroll'></view>
                        <view class='shan-point {{pointActive?"":"pointActive"}}'  data-shanindex="2" catchtap='getLeftScroll'></view>
                    </view>
                </view>
            </view>
        </view>
        <view class='business'>
            <view class='business-content box-shadow marginbottom'>
                <view class='show-hot-scenic'>推荐</view>
                <block wx:for="{{list}}" wx:key="{{index}}">
                    <view wx:if="{{item.IMG_URL}}" class='part-of-hot' data-img-urls="{{item.ORGN_NAME}}" data-index="{{index}}" catchtap='getDetailIntroduce'>
                        <image src='{{item.IMG_URL}}'></image>
                        <view class='ticket-introduce'>{{item.ORGN_NAME || item.agent_name}}</view>
                    </view>
                </block>
            </view>
        </view>
    </scroll-view>
    <include src="../common/common_footer/common_footer.wxml" />
</view>

css部分

page {
    width: 100%;
    height: 100%;
}


/* 小圆圈信息提示 */

.weui-badge {
    background-color: #ec7f5e;
    color: #fff;
    width: 32rpx;
    height: 32rpx;
    border-radius: 32rpx;
    line-height: 32rpx;
    padding: 0;
    position: absolute;
    top: 16%;
    right: 15%;
}

/* 搜索最大view*/

.show-search {
    width: 100%;
    height: 90rpx;
}

/* 搜索的方式每个view的公共部分 */

.show-search>view {
    height: 100%;
    float: left;
}

/* 展示消息及扫码部分 */

.show-scan, .show-message {
    width: 15%;
    line-height: 90rpx;
    text-align: center;
}

/* 消息提醒相对定位 */

.show-message {
    position: relative;
}

/* 展示最大的搜索部分 */

.show-big-search {
    width: 68%;
}

/* 扫码时的img多大 */

.show-scan>image {
    width: 44rpx;
    height: 44rpx;
    vertical-align: middle;
}

/* 消息图标的大小 */

.show-message>image {
    width: 42rpx;
    height: 42rpx;
    vertical-align: middle;
}

/* 展示信息提示 */

.message_tip {
    position: absolute;
    top: 25%;
    right: 18%;
    width: 25rpx;
    height: 25rpx;
    border-radius: 25rpx;
    background: #ec7f5e;
    color: #fff;
    font-size: 19rpx;
    line-height: 25rpx;
    text-align: center;
}

/* 显示搜索框和搜索放大镜 */

.the-search {
    width: 100%;
    height: 75%;
    background: #fff;
    border-radius: 14rpx;
    margin-top: 12rpx;
    overflow: hidden;
}

/* 展示搜索的放大镜和input的公共布局 */

.the-search>view {
    float: left;
    height: 100%;
    line-height: 63rpx;
}

/* 输入框百分比 */

.input-search {
    width: 85%;
}

/* input框的设置 */

.input {
    width: 97%;
    height: 100%;
    font-size: 26rpx;
    padding-left: 5%;
    border: none;
    outline: none;
    text-align: left;
}

/* 放大镜的设置 */

.search-icon {
    width: 15%;
    text-align: center;
}

/* 放大镜的大小 */

.search-icon>image {
    width: 38rpx;
    height: 38rpx;
    vertical-align: middle;
}

/* 滑动区域 */

.shan-content {
    position: absolute;
    top: 90rpx;
    left: 0;
    right: 0;
    bottom: 0rpx;
}

/* 展示图片 */

.banner {
    width: 100%;
    height: 300rpx;
}

/* banner图片的大小 */

.banner>image {
    width: 100%;
    height: 100%;
}

/* 主营业务大view */

.business {
    width: 94%;
    height: auto;
    margin-top: 20rpx;
    padding-left: 3%;
}

/* 居中 */

.shanshowBusiness {
    width: 12.5%;
    height: 230rpx;
    float: left;
    text-align: center;
    margin: 0 auto;
}

/* 主营业务带阴影 */

.box-shadow {
    width: 100%;
    border-radius: 20rpx;
    background: #fff;
    box-shadow: 0 0 40rpx rgba(1, 130, 125, 0.14);
    overflow: hidden;
}

/* scroll-x左右滑动 */
.shan-scroll-x {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    height: 220rpx;
}

/* 展示主营业务的每一个 */

.part-of-business {
    width: 25%;
    height: 220rpx;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
}

/* 业务的图片 */

.part-of-business image {
    width: 110rpx;
    height: 110rpx;
    margin-top: 38rpx;
}

/* 主营业务的小块 */

.part-of-business view {
    font-size: 28rpx;
    margin-top: -5rpx;
}
/*展示滑动时左边右边两页*/
.point{
    width: 100%;
    height: 30rpx;
    background: #fff;
}
/*小点的内容*/
.all-point{
    width: 80rpx;
    margin: 0 auto;
    height:18rpx;
    overflow: hidden;
}
.shan-point{
    margin-left: 15rpx;
    width: 18rpx;
    height: 18rpx;
    background: #c1e6d9;
    border-radius: 18rpx;
    float: left;
}
.pointActive{
    background: #6ed0ad;
}
/* 热门推荐文字 */

.show-hot-scenic {
    margin-top: 16rpx;
    width: 97%;
    height: 60rpx;
    padding-left: 3%;
    line-height: 60rpx;
    font-size: 30rpx;
    margin-bottom: 10rpx;
}

/* 热门部分 */

.part-of-hot {
    width: 46%;
    height: 250rpx;
    padding-left: 2.8%;
    float: left;
}

/* 热门图片 */

.part-of-hot image {
    width: 100%;
    height: 150rpx;
    border-radius: 10rpx;
}

/* 热门名字 */

.ticket-introduce {
    height: 70rpx;
    line-height: 35rpx;
    font-size: 26rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 距离底部 */

.marginbottom {
    margin-bottom: 30rpx;
}

/* 滚动条 */

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.noneDisplay {
    display: none;
}

js部分就是为了滑动时写的一部分

var util = require('../../utils/util.js');
var loginStatus = true;
Page({

    /**
     * 页面的初始数据
     */
    data: {
        imgHome: true,
        imgPersonal: false,
        list: [],//得到热门推荐列表
        lastCode: "",//得到login返回的code
        inputValue: "",//得到搜索框的内容
        href: "",
        pointActive:true,//用于主营业务左页和右页
        shanScrollLeft:0,//主营业务左边滚或右边滚动
    },
    /**
     * 得到跳转的是酒店还是门票还是景点
     */
    navicationToWhere: function (e) {
        var index = e.currentTarget.dataset.index;
        if (index == 0){
            //直通车
            wx.navigateTo({
                url: '../direct_train/directHomepage/directHomepage?isServes=1',
            })
        }else if (index == 1) {
             //票务
            wx.navigateTo({
                url: '../direct_train/directHomepage/directHomepage?isServes=2',
            })
        } else if (index == 2) {
            //酒店
            wx.navigateTo({
                url: '../direct_train/hotelScenicList/hotelScenicList?dataTypes=2',
            })
        } else if (index == 3) {
            //订制旅游
            wx.navigateTo({
                url: '../direct_train/ticketDetail/ticketDetail?isCustomTourismsa=true',
            })
        } else if (index == 4) {
            //特产
            wx.navigateTo({
                url: '../direct_train/specialtyList/specialtyListsha',
            })
        } 
    },
    /**
     * 主营业务部分的内容显示(滑动效果上一页下一页)
     */
    nextOrPrev:function(e){
        let scrollLeft = e.detail.scrollLeft;
        if (scrollLeft>=40){
            this.setData({ pointActive:false});
        }else{
            this.setData({ pointActive: true });
        }
    },
    /**
     * 点击主营业务下的上一页下一页
     */
    getLeftScroll:function(e){
        // shanScrollLeft=86
        let index = e.currentTarget.dataset.shanindex;
        if (index ==1){
            this.setData({ pointActive: true, shanScrollLeft:0 });
        }else if(index ==2){
            // this.setData({ pointActive: false, shanScrollLeft: 174  });
            this.setData({ pointActive: false, shanScrollLeft: 88 });
        }
    },
    
    /**
     * 得到路径
     */
    tapNavToWhere: function (e) {
        var index = e.currentTarget.dataset.hotIndex;
        var ticketcode = this.data.list[index].productId;
        var productName = this.data.list[index].productName;
        wx.setStorageSync("imgUrls", e.currentTarget.dataset.imgUrls);
        wx.navigateTo({
            url: '../direct_train/ticketDetail/ticketDetail?ticketcode=' + ticketcode + '&productName=' + productName + '',
        })
    },

    /**
     * 热门推荐部分
     */
    getHot: function () {
        var that = this;
        //sessionChoose 1是带sessionID的GET方法  2是不带sessionID的GET方法, 3是带sessionID的Post方法,4是不带sessionID的Post方法
        // util.HttpRequst(true, "ztc/product/getRecommendProduct", 3, wx.getStorageSync("sessionId"), {}, "POST", false, function (res) {
        //     console.log('getRecommendProduct', res)
        //     // if (res.code == 200) {
        //     //     that.setData({ list: res.list });
        //     // }
        // })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        wx.removeStorageSync('searchValue');
        this.getHot();
    },

    onShow: function () {
        wx.removeStorageSync('searchValue');
    },
})

上下滑就可以实现了，主要是左右滑的时候可滑动的大view要这样写

/* scroll-x左右滑动 */
.shan-scroll-x {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    height: 220rpx;
}

每一个小view不能用display：flex或者float：left，这样都不生效的。要像下面那样写

/* 展示主营业务的每一个 */

.part-of-business {
    width: 25%;
    height: 220rpx;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
}

需要注意的已经特意标出来了，希望小伙伴在做的时候多注意