vue + better-scroll 封装成组件，横向滚动

项目需要，需要个横向滚动条，封装成组件，信息从父页面传递，搞了一下午，贴代码：组件为last-play:<template><div><svg class="icon" aria-hidden="true" slot="icon" ><use

Qaye

5323人浏览 · 2018-03-22 19:46:29

Qaye · 2018-03-22 19:46:29 发布

项目需要，需要个横向滚动条，封装成组件，信息从父页面传递，搞了一下午，贴代码：

组件为last-play:

 
  < 
  template 
  > 
 
  < 
  div 
  > 
 
  < 
  svg 
  class= 
  "icon" 
  aria-hidden= 
  "true" 
  slot= 
  "icon" 
  > 
 
  < 
  use 
  xlink:href= 
  "#icon-zuijinlaifang" 
  ></ 
  use 
  > 
 
  </ 
  svg 
  > 
 
  < 
  span 
  >最近在玩 
  </ 
  span 
  > 
 
  < 
  div 
  class= 
  "tab" 
  ref= 
  "tab" 
  > 
 
  < 
  div 
  class= 
  "tab_content" 
  ref= 
  "tabcontent" 
  > 
 
  < 
  game_block 
  class= 
  "tab_item" 
  v-for="( 
  item, 
  index) 
  in 
  lastGameList" 
  ref= 
  "tabitem" 
  :gameinfo = 
  'item' 
  > 
 
  </ 
  game_block 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  < 
  foot-guide 
  ></ 
  foot-guide 
  > 
 
  </ 
  div 
  > 
 
  </ 
  template 
  > 
 
  < 
  script 
  > 
 
  import { 
  mapState } 
  from 
  "vuex"; 
 
  import 
  footGuide 
  from 
  'src/components/footGuide'; 
 
  import 
  BScroll 
  from 
  'better-scroll'; 
 
  import 
  game_block 
  from 
  'src/components/gameBlock'; 
 
  export 
  default { 
 
  name: 
  'last_play', 
 
  data() { 
 
  return { 
 
  selected: 
  'game', 
 
  activeIndex: 
  'game', 
 
   }; 
 
   }, 
 
  components: { 
 
  footGuide, 
 
  game_block 
 
   }, 
 
  created () { 
 
  this. 
  $nextTick(() 
  =>{ 
 
  this. 
  InitTabScroll(); 
 
   }); 
  //必须等dom元素挂载完下一帧才能渠道$refs 
 
   }, 
 
  props: [ 
  "lastGameList"], 
 
  methods: { 
 
  goSpecial( 
  index){ 
 
  console. 
  log( 
  'jump to index:'+ 
  index); 
 
   }, 
 
  InitTabScroll(){ 
 
  console. 
  log( 
  this. 
  lastGameList); 
 
  let 
  width= 
  this. 
  lastGameList. 
  length * 
  80; 
 
  this. 
  $refs. 
  tabcontent. 
  style. 
  width= 
  width+ 
  'px'; 
 
  console. 
  log( 
  width); 
 
  this. 
  $nextTick(() 
  =>{ 
 
  if (! 
  this. 
  scroll) { 
 
  this. 
  scroll= 
  new 
  BScroll( 
  this. 
  $refs. 
  tab, { 
 
  startX: 
  0, 
 
  click: 
  true, 
 
  scrollX: 
  true, 
 
  scrollY: 
  false, 
 
  eventPassthrough: 
  'vertical' 
 
   }) 
 
   } 
  else{ 
 
  this. 
  scroll. 
  refresh(); 
 
   } 
 
   }); 
 
   } 
 
   } 
 
   } 
 
  </ 
  script 
  > 
 
  < 
  style 
  lang= 
  "scss" 
  > 
 
  .tab{ 
 
  display: 
  inline-block; 
 
  width: 
  100%; 
 
  height: 
  130px; 
 
  overflow: 
  hidden; 
 
   } 
 
  .tab_content{ 
 
  text-align: 
  'center'; 
 
  height: 
  130px; 
 
   } 
 
  .tab_item{ 
 
  display: 
  inline-block; 
 
   } 
 
  .icon { 
 
  display: 
  inline-block; 
 
  width: 
  1em; 
 
  height: 
  1em; 
 
  vertical-align: 
  -0.15em; 
 
  fill: 
  currentColor; 
 
  overflow: 
  hidden; 
 
  margin-left: 
  10px; 
 
  margin-right: 
  10px; 
 
   } 
 
  span{ 
 
  font-size: 
  0.4rem; 
 
   } 
 
  </ 
  style 
  >

其中game_block 是封装的另一个组件，lastGameList 是父页面到子组件传递的数据

父页面引用：

            
  < 
  div 
  style= 
  "lastPlaydiv " 
  > 
 

                
  < 
  last_play 
  :lastGameList = 
  'gameinfo' 
  ></ 
  last_play 
  > 
 

            
  </ 
  div 
  > 
 

有个坑就是：lastGameList 必须是数组，不能是json!!

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^