uni-app中實現圖片左滑的效果

template:

<view class="my-reg">
    <view class="my-regs">
       <image class="reg-img" src="/static/圖1.png" alt="" />
       <image class="reg-img" @tap="openDetail" src="/static/圖2.png" alt="" />
       <image class="reg-img" src="/static/圖3.png" alt="" />
        <image class="reg-img" src="/static/圖4.png" alt="" />
     </view>
</view>

js:

css:

.reg-img {
    width: 222rpx;
    height: 116rpx;
    margin-right:18rpx;
}
.my-reg {
    padding:20rpx 30rpx;
    border-bottom: 20rpx solid #F5F6F9;
    display: flex;
    overflow-y: hidden;
    overflow-x: scroll
}
.my-regs{
    display: flex;
    margin-right: 8px;
}

 

實現效果：圖片可以左右滑動顯示