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

2022-08-07 14:01:03

專案概述

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

涉及知識點

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

實現

實現容器

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

這邊為了省事，我是選擇了 vue-awesome-swiper@2.6.7：

npm i vue-awesome-swiper@2.6.7 -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下一頁閱讀全文

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

目錄

專案概述

涉及知識點

實現

實現容器

computed 實現分頁

熱門文章