UNIAPP【scroll-view自定义轮播图+带左右箭头】

最近公司项目上遇到一个问题当时以为是轮播类型就OK了，后来连接接口才发现是列表类型的可以手动滑动，当时也不想自己写。。。。。然后就什么问题问度娘，结果度娘也拿我这个没法

想拧螺丝拧不了咋办呢，只有自己手写噻！优秀的程序员全靠手写！！！！！！！！！！！

看不懂的可以先看看官网的例子

首先来个展示图

如果这个示例适合你的项目那么就可以直接搬来改

先说说思路吧

这样一排3个 如果后台返回的是一个数组 这样就分成

常规的3的倍数的 非常规不为3的倍数的

123                          123

456                          456

789                          567

HTML:

		<view class="banner-box2 flex a_i_c">
			<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
            }
    },

不喜勿喷，本人才疏学浅！！！

好了 分享结束！！！

结语：

千万不要忘记分享自己学到的东西。你可以通过演讲的方式分享自己的知识，也可以创建自己的博客、为公众号写文章或者写书，还可以在社区活动或者技术大会上发表演讲。外部曝光有助于你建立自己在该领域的权威地位，也让你看起来对所供职的公司更有价值。