<template>
  <div class='tuitui-swiper-out'>
    <div class='title'>
      滑动框
    </div>
    <div class='item'>
      <BKSwiperout
        :title="'左滑试试看'"
        :des="'请选择您要进行的操作'"
        :buttons="swiperoutBtns"
        @click="pSwiperoutClick"
      >
      </BKSwiperout>
    </div>
    <div class='item-2'>
      <BKSwiperout
        :title="'左滑试试看'"
        :des="'请选择您要进行的操作'"
        :buttons="swiperoutBtns2"
        @click="pSwiperoutClick"
      >
      </BKSwiperout>
    </div>
  </div>
</template>
<script>
import BKSwiperout from '@/components/BKSwiperout'
export default {
  components: {
    BKSwiperout
  },
  data () {
    return {
      swiperoutBtns: [
        {
          text: '喜欢',
          backgroundColor: '#f44',
          textColor: 'white'
        },
        {
          text: '返回',
          backgroundColor: '#1989fa',
          textColor: 'white'
        }
      ],
      swiperoutBtns2: [
        {
          text: '未读',
          backgroundColor: '#ccc',
          textColor: '#222'
        },
        {
          text: '删除',
          backgroundColor: '#f44',
          textColor: 'white'
        },
        {
          text: '收藏',
          backgroundColor: '#1989fa',
          textColor: 'white'
        }
      ]
    }
  },
  mounted () {
    wx.setNavigationBarTitle({
      title: 'BKSwpierout 滑动框'
    })
  },
  methods: {
    pSwiperoutClick (data, index) {
      console.log(data, index)
    }
  }
}
</script>
<style scoped>
.title {
  padding: 40px;
  font-size: 26px;
  font-weight: 600;
  color: #ccc;
  margin-bottom: 20px;
  margin-top: 40px;
}
.item-2 {
  margin-top: 100px;
}
</style>
