live-telecast-ui-h5/src/views/introduce/index.vue

<template>
  <div class="introduce">
    <div class="header">
      <img :src="back" alt="" @click="onClickLeft">
    </div>
    <div class="list" v-if="showList&&showList.length>0">
      <img v-for="(img,index) in showList" :key="img+index" :src="img" alt="">
    </div>
  </div>
</template>

<script>
import resToken from "@/mixins/resToken";
export default {
  mixins: [resToken],
  data() {
    return {
      title: null,
      back:require(`@/assets/images/introduce/back@2x.png`),
      showList: [],
      list: [
        {
          index: 1,
          total: 5,
        },
        {
          index: 2,
          total: 3,
        },
        {
          index: 3,
          total: 5,
        },
        {
          index: 4,
          total: 3,
        },
        {
          index: 5,
          total: 5,
        },
        {
          index: 6,
          total: 7,
        },
        {
          index: 7,
          total: 6,
        },
      ],
      loading: false,
    };
  },
  async created() {
    this.showList = [];
    let index = this.$route.query.index;
    this.getImgList(index ? index : 0);
  },

  methods: {
    onClickLeft() {
      window.history.back(-1);
    },
    getImgList(index) {
      let total = 0;
      let findi = this.list.findIndex((v) => v.index === Number(index) );
      console.log(index,findi);
      if (findi !== -1) {
        total = this.list[findi].total;
      }
      for(let i=0;i<total;i++){
        this.showList.push(require(`@/assets/images/introduce/${index}/${i+1}.0@2x.png`))
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.introduce {
 background: #e6e6dc;
 position:fixed;
 
 width: 100%;
 height: 100%;
 .list{
position: relative;
 width: 100%;
 height: 100%;
 overflow-y:scroll;
 img{
   display: inline-block;
   width: 100%;
   margin:-5px 0 0 0;

 }}
 .header{
   position: absolute;
   height: 46px;
   width: 100%;
   top:0;
   left:0;
   z-index:2;
   img{
     width: 8px;
     margin: 17px 0 0 16px;
   }
 }
}
</style>