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

<script>
import Bus from '@/common/bus'

export default {
  data () {
    return {
      datalist: [],
      imgList: []
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
    getDataList () {
      // this.axios
      //   .post('http://rap2api.taobao.org/app/mock/115626/materials-list', {
      //     pageNo: 1,
      //     pageSize: 10
      //   })
      //   .then(res => {
      //     if (res && res.data && res.data.code === 0) {
      //       res.data.result.result.forEach(item => {
      //         this.imgList = item.content.news_item
      //         Bus.$emit('test1', 1213)
      //       })
      //     }
      //   })
      this.axios
        .post('/materials-list', {
          pageNo: 1,
          pageSize: 20
        })
        .then(res => {
          if (res && res.data) {
            console.log('res', res)
            // 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>
