vue實現微信公眾號h5跳轉小程序的示例代碼第1/3頁

Posted on by

項目概述

實現類似圖中紅色框框選中可以左右滑動的組件，點擊可以跳轉到對應的小程序頁面。

涉及知識點

  • computed 實現分頁
  • 開放標簽 wx-open-launch-weapp 使用

實現

實現容器

首先我們來實現兩行可以左右滑動的容器。

這邊為瞭省事，我是選擇瞭 [email protected]：

  • npm i [email protected] -S
  • main.js 引入
    • import VueAwesomeSwiper from 'vue-awesome-swiper'
    • Vue.use(VueAwesomeSwiper)
  • 文件中直接使用

當然瞭現在我們的頁面並不會非常好看，不過容器部分第一步是實現瞭。如下所示

computed 實現分頁

接著就是用 computed 來實現分頁，代碼入下

data() {

  return {

    iconList: [

        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 1 },

        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 2 },

        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 3 },

        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 4 },

        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 5 },

        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 6 },

        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 7 },

        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 8 },

        { iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應用名稱', id: 9 },

      ]

  }

}


computed: {

  pages () {

      const pages = []

      this.iconList.forEach((item, index) => {

        const page = Math.floor(index / 8)

        if (!pages[ page ]) {

          pages


123下一頁閱讀全文


推薦閱讀：