广告位联系
返回顶部
分享到

Swiper实现两行四列轮播图效果的实例

JavaScript 来源:互联网 作者:佚名 发布时间:2022-10-08 08:21:11 人浏览
摘要

案例效果 基本样式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 .icons{ width:100%; overflow: hidden; } .icons-item{ width: 25%; height: 0; padding-bottom: 25%; float: left; } .icons-item img{ width: 1.1rem; height: 1.

案例效果

基本样式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

.icons{

  width:100%;

  overflow: hidden;

}

.icons-item{

  width: 25%;

  height: 0;

  padding-bottom: 25%;

  float: left;

}

.icons-item img{

  width: 1.1rem;

  height: 1.1rem;

  display: block;

  margin: 0 auto;

  padding-top: .2rem;

}

.icons-item p{

  margin-top: .1rem;

  font-size: .28rem;

  text-align: center;

  color: #212121;

}

所需文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

<script type="text/javascript">

export default {

  data(){

    return {

      swiperOption:{},

      iconsList:[

        {

          id:"01",

          imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",

          text:"酒店"

        },

        {

          id:"02",

          imgUrl:"//s.qunarzz.com/homenode/images/touchheader/flight.png",

          text:"机票"

        },

        {

          id:"03",

          imgUrl:"//s.qunarzz.com/homenode/images/touchheader/train.png",

          text:"火车票"

        },

        {

          id:"04",

          imgUrl:"//s.qunarzz.com/homenode/images/touchheader/package.png",

          text:"度假"

        }

        ,{

          id:"05",

          imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",

          text:"景点门票"

        }

        ,{

          id:"06",

          imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",

          text:"景点门票"

        }

        ,{

          id:"07",

          imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",

          text:"景点门票"

        }

        ,{

          id:"08",

          imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",

          text:"景点门票"

        }

        ,{

          id:"09",

          imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",

          text:"景点门票"

        }

        ,{

          id:"10",

          imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",

          text:"景点门票"

        }

      ],

      swiperOption:{

        //  设置分页器

          pagination: {

            el: '.swiper-pagination',

          }

        }

      }

  },

  computed:{

    page(){

      let pages = [];

      this.iconsList.forEach((item,index)=>{

        let idx = Math.floor(index/8)

        if(!pages[idx]) pages[idx] =[];

        pages[idx].push(item)

      })

      return pages

    }

  }

}

</script>

需要注意的是 let idx = Math.floor(index/8) if(!pages[idx]) pages[idx] =[]; pages[idx].push(item) 用来将这些图片文字 以八个为单位分别拆开 从而实现最重要的效果

循环遍历

1

2

3

4

5

6

7

8

9

10

11

<div class="icons">

    <swiper ref="mySwiper" :options="swiperOption">

          <swiper-slide v-for='item in page' :key='item.id'>

            <div v-for="page in item" :key="page.id"  class="icons-item">

              <img :src="page.imgUrl">

              <p>{{page.text}}</p>

            </div>

          </swiper-slide>

        <div class="swiper-pagination" slot="pagination"></div>

    </swiper>

  </div>

先遍历以八个为单位的数组 然后在遍历里面的内容


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://juejin.cn/post/7150525637025857544
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计