标签：VUE 滚动 padding width certificateWidth hidden font certificateImg 图片

1、HTML

<el-row :gutter="20">
    <el-col :xs="24" :sm="24" :md="24">
        <div class="jxIndexFrame">
            <span class="jxIndexTitle">荣誉资质</span>
            <div class="certificateModel">
                <el-col :xs="2" :sm="2" :md="1" class="text-right certificateArrow" style="margin-left: 5px">
                    <i class="el-icon-d-arrow-left" @click="prevCenterHonorCertificate"></i>
                </el-col>
                <el-col :xs="20" :sm="20" :md="22">
                    <div class="certificateFrom">
                        <div v-bind:style="{ width: 278 * certificateList.length + 'px' ,transition: 'transform 1s linear', transform:'translateX(' + certificateWidth + 'px)'}">
                            <div v-for="(item, index) in certificateList" :key="index">
                                <div class="certificateImg">
                                    <img :src="item.certificatesImg" alt="">
                                    <span>{{item.certificatesName}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="2" :sm="2" :md="1" class="text-center certificateArrow" style="margin-left: -10px">
                    <i class="el-icon-d-arrow-right" @click="nextCenterHonorCertificate(certificateList.length, 6)"></i>
                </el-col>
            </div>
        </div>
    </el-col>
</el-row>

2、JS

data () {
    return {
        certificateList: [],
        certificateWidth: 0
    }
},
methods: {
// 获取证书列表
getHonorBookList () {
  this.$http.get(`/help/jxhonor/getAllHonorList`, {
    params: {}
  }).then(({ data: res }) => {
    this.certificateList = res.data
  }).catch(() => {
  })
},
/**
* 证书点击上一个
*/
 prevCenterHonorCertificate () {
   this.certificateWidth = this.certificateWidth + 278
   if (this.certificateWidth > 0) {
     this.certificateWidth = 0
   }
 },
 /**
  * 证书点击下一个
  */
 nextCenterHonorCertificate (length, lengthNum) {
   var xNumber = -278
   this.certificateWidth = this.certificateWidth + xNumber
   if (this.certificateWidth <= ((length - lengthNum) * xNumber)) {
     this.certificateWidth = ((length - lengthNum) * xNumber)
   }
 }
}

3、CSS

@media (min-width: 320px) and (max-width: 767px) {
    // 荣誉资质
  .certificateModel{
    padding-top: 30px;
  }
  .certificateModel .el-col-xs-2{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .certificateModel .el-col-xs-20{
    padding-left: 6px !important;
  }
  .certificateFrom{
    overflow: hidden;
    width: 270px;
  }
  .certificateImg{
    overflow: hidden;
    width: 278px;
    height: 216px;
    float: left;
  }
  .certificateImg img{
    display: block;
    width: 260px;
    height: 180px;
    margin: 0 9px;
  }
  .certificateImg span{
    display: block;
    text-align: center;
    padding: 15px 0;
    font-size: 16px;
  }
  .certificateArrow i{
    font-size: 24px;
    color: #73d19e;
    font-weight: bold;
    padding: 70px 0;
    cursor: pointer;
  }
}


@media (min-width: 768px) and (max-width: 1920px) {
    // 荣誉资质
  .certificateModel{
    margin: 90px 0 50px 0;
    overflow: hidden;
  }
  .certificateFrom{
    overflow: hidden;
  }
  .certificateImg{
    overflow: hidden;
    width: 278px;
    height: 220px;
    float: left;
  }
  .certificateImg img{
    display: block;
    width: 260px;
    height: 180px;
    margin: 0 9px;
  }
  .certificateImg span{
    font-size: 16px;
    text-align: center;
    display: block;
    padding-top: 15px;
    line-height: 28px;
  }
  .certificateArrow i{
    font-size: 36px;
    color: #73d19e;
    font-weight: bold;
    padding: 70px 0;
    cursor: pointer;
  }
}

标签：VUE,滚动,padding,width,certificateWidth,hidden,font,certificateImg,图片
来源： https://blog.csdn.net/qq_30228701/article/details/120708392

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。