小程序scroll-view上下滑的内部加左右滑，scroll-x生效的情况
今天做了下滑块里包含左右滑的效果，由于scroll-view 左右滑说的不够清楚，只能百度和看别人的例子了。还好scroll-view里面可以嵌套scroll-view，不然还要处理其他的问题。不啰嗦咯，上例子，由于例子的图片都不存在。所以就把图片注释掉了。复制粘贴看效果的呢需要自己添加点图片和数组哦。如果有不懂的可以评论，我记得会回复的。
xxxx
zzzzz
saaaaaa
qqqqq
wereret
tuyuyjhjghh
推荐
{{item.ORGN_NAME || item.agent_name}}
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;
}/* 展示主营业务的每一个 */
.part-of-business {
width: 25%;
height: 220rpx;
display: inline-block;
text-align: center;
margin: 0 auto;
}