最近公司项目上遇到一个问题当时以为是轮播类型就OK了，后来连接接口才发现是列表类型的可以手动滑动，当时也不想自己写。。。。。然后就什么问题问度娘，结果度娘也拿我这个没法
想拧螺丝拧不了咋办呢，只有自己手写噻！优秀的程序员全靠手写！！！！！！！！！！！
首先来个展示图
如果这个示例适合你的项目那么就可以直接搬来改
先说说思路吧
这样一排3个 如果后台返回的是一个数组 这样就分成
常规的3的倍数的 非常规不为3的倍数的
123 123
456 456
789 567
HTML:
<uni-icons class="icon1" type="arrowleft" size="22" color='#CCCCCC' @click.stop="leftImg()"></uni-icons>
<scroll-view :scroll-x="true" :scroll-left='leftWidth' class="item_sw_1 flex a_i_c j_c_b m_lsiu" scroll-with-animation>
<view class="item_box_lpu" >
<view class="item_sw_0101" v-for="(aitem, indexa) in tableData.hots" :key="indexa">
<image :src="aitem.big" mode=""></image>
<view class="item_sw_02">
<view class="flex a_i_c j_c_c sw_001">
<image src="../../static/image/ivon.png" mode=""></image>
<view>{{indexa +1}}</view>
</view>
<view class="sw_002">+￥{{aitem.point_price}}</view>
</view>
</view>
</view>
</scroll-view>
<uni-icons class="icon1" type="arrowright" size="22" color='#CCCCCC' @click.stop="rightImg()"></uni-icons>
</view>
样式：这里面样式有些是公用样式
.banner-box2{
width: 702rpx;
height: 240rpx;
margin: 30rpx auto;
position: relative;
}
.icon1{
width: calc((100% - 620rpx) / 2);
position: relative;
// left: ;
}
.m_lsiu{
white-space: nowrap;
}
.item_sw_1{
width: 620rpx;
height: 250rpx;
overflow: hidden;
.item_sw_0101{
width: 192rpx;
background: #FFFFFF;
border-radius: 12rpx;
display: inline-block;
margin-right: 22rpx;
overflow: hidden;
.item_sw_02{
box-sizing: border-box;
padding: 20rpx 16rpx;
.sw_002{
font-size: 24rpx;
color: #EB3B17;
text-align: center;
}
.sw_001{
image{
height: 24rpx;
width: 22rpx;
margin-right: 4rpx;
}
view{
font-size: 28rpx;
color: #FE961A;
}
}
}
image{
height: 126rpx;
width: 100%;
border-radius: 14rpx;
}
&:last-child{
margin-right: 0;
}
}
}
js
data:
leftWidth:0,
leftWidthSw:0,//总宽度
swiperInter:null, //定时器
hotsLength:0, // 数组长度
js:
//获取当前滚动条宽度
handelWidth(){
var that = this
uni.getSystemInfo({
success: function (res) { // res - 各种参数
let obj = uni.createSelectorQuery().select('.item_sw_0101')
obj.boundingClientRect(function (data) { // data - 各种参数
console.log("datadata---",data)
that.leftWidthSw = data.width + uni.upx2px(22)
that.swiperList()
}).exec()
}
})
},
/**@param {fun} init 获取数据 */
init(){
this.$api.integral.pointShopHome().then(res=>{
this.tableData = res.data.data
this.hotsLength = res.data.data.hots.length
this.$nextTick(function(){
this.handelWidth()
})
})
},
重点代码来了：前方高能！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
this.hotsLength //返回的数据长度
this.leftWidthSw //动态获取每一个块的宽度
swiperList(){
clearInterval(this.swiperInter) //每次滚动一次，需要清除一次定时器
this.swiperInter = setInterval(()=>{
let a = this.leftWidthSw * this.hotsLength //单个dom * 数组长度
let a1 = this.hotsLength % 3 //余数
let a2 = ((this.hotsLength - a1) / 3) - 1 //滚动的次数
let b = a2 * (3 * this.leftWidthSw) // a2需要滚动的长度
let c = (a1 * (3 * this.leftWidthSw)) + b//不为3倍数时总需滚动长
//3倍数
if(this.leftWidth >= b && a1==0){
this.leftWidth = 0
}else if(this.leftWidth < b && a1==0){
this.leftWidth = Math.abs(this.leftWidth) + (this.leftWidthSw * 3)
}
//不为3倍数
if(this.leftWidth >= b && a1>0 && this.leftWidth < c){
this.leftWidth += a1 * (3 * this.leftWidthSw)
}else if (this.leftWidth<b && a1>0){
this.leftWidth = Math.abs(this.leftWidth) + (this.leftWidthSw * 3)
}else if(this.leftWidth == c && a1>0){
this.leftWidth = 0
}
},2000)
},
/**@param {type} 轮播事件减少*/
leftImg() {
this.swiperList()
let a = this.leftWidthSw * this.hotsLength //
let b = (this.hotsLength - 3) * this.leftWidthSw
if(this.leftWidth != 0){ //
this.leftWidth = Math.abs(this.leftWidth) - this.leftWidthSw
}else{
this.leftWidth = b
}
},
/**@param {type} 轮播事件增加*/
rightImg(){
this.swiperList()
let a = this.leftWidthSw * this.hotsLength
let b = (this.hotsLength-3) * this.leftWidthSw
if(this.leftWidth >= b){ //
this.leftWidth = 0
}else{
this.leftWidth = Math.abs(this.leftWidth) + this.leftWidthSw
}
},
第一次在掘金发帖子，不喜勿喷，本人才疏学浅！！！
好了 分享结束！！！
结语：
千万不要忘记分享自己学到的东西。你可以通过演讲的方式分享自己的知识，也可以创建自己的博客、为公众号写文章或者写书，还可以在社区活动或者技术大会上发表演讲。外部曝光有助于你建立自己在该领域的权威地位，也让你看起来对所供职的公司更有价值。
