<template>
  <div class="materialist clear">
    <ul>
      <li v-for="(item,index) in datalist" :key="index" @click="handleClick(index)">
        <img :src="img1" alt="">
      </li>
    </ul>
  </div>
</template>

<script>
import img1 from './../../../assets/images/img1.png'

export default {
  data () {
    return {
      datalist: [],
      img1
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
    getDataList () {
      this.axios.get('static/materialist.json').then(res => {
        if (res && res.data) {
          this.datalist = res.data.datalist
        }
      })
    },
    handleClick (index) {
      console.log('li', index)
    }
  }
}
</script>
<style lang="stylus" scoped>
.materialist
  ul
    width 100%
    height 217px
    white-space nowrap
    overflow-x auto
    margin-bottom 5px
    li
      display inline-block
      margin-left 5px
      img
        width 240px
        height 200px
    li img:hover
      border 1px solid skyblue
      box-shadow 2px 2px 2px skyblue
/* 定义滚动条高宽及背景 */
::-webkit-scrollbar
  height 6px
/* 滑块 */
::-webkit-scrollbar-thumb
  border-radius 7px
  background-color rgba(127, 127, 127, 1)
</style>
