今天做了下滑块里包含左右滑的效果，由于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>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返回的codeinputValue: "",//得到搜索框的内容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=86let 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;
}/* 展示主营业务的每一个 */.part-of-business {width: 25%;height: 220rpx;display: inline-block;text-align: center;margin: 0 auto;
}