vue實(shí)現(xiàn)微信公眾號(hào)h5跳轉(zhuǎn)小程序的示例代碼第1/3頁
更新時(shí)間：2022年08月07日 11:04:08 作者：_詹某_
本文主要介紹了vue實(shí)現(xiàn)微信公眾號(hào)h5跳轉(zhuǎn)小程序的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
項(xiàng)目概述
實(shí)現(xiàn)類似圖中紅色框框選中可以左右滑動(dòng)的組件，點(diǎn)擊可以跳轉(zhuǎn)到對(duì)應(yīng)的小程序頁面。
涉及知識(shí)點(diǎn)
- computed 實(shí)現(xiàn)分頁
- 開放標(biāo)簽 wx-open-launch-weapp 使用
實(shí)現(xiàn)
實(shí)現(xiàn)容器
首先我們來實(shí)現(xiàn)兩行可以左右滑動(dòng)的容器。
這邊為了省事，我是選擇了 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)
- 文件中直接使用
當(dāng)然了現(xiàn)在我們的頁面并不會(huì)非常好看，不過容器部分第一步是實(shí)現(xiàn)了。如下所示
computed 實(shí)現(xiàn)分頁
接著就是用 computed 來實(shí)現(xiàn)分頁，代碼入下
data() {
return {
iconList: [
{ iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應(yīng)用名稱', id: 1 },
{ iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應(yīng)用名稱', id: 2 },
{ iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應(yīng)用名稱', id: 3 },
{ iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應(yīng)用名稱', id: 4 },
{ iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應(yīng)用名稱', id: 5 },
{ iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應(yīng)用名稱', id: 6 },
{ iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應(yīng)用名稱', id: 7 },
{ iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應(yīng)用名稱', id: 8 },
{ iconPcurl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png', nameApp: '應(yīng)用名稱', id: 9 },
]
}
}
computed: {
pages () {
const pages = []
this.iconList.forEach((item, index) => {
const page = Math.floor(index / 8)
if (!pages[ page ]) {
pages
相關(guān)文章
main.js是項(xiàng)目的入口文件，項(xiàng)目中所有的頁面都會(huì)加載main.js，本文主要介紹了vue項(xiàng)目main.js配置及使用方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2023-05-05
插槽就是子組件中的提供給父組件使用的一個(gè)占位符，用<slot></slot>?表示，父組件可以在這個(gè)占位符中填充任何模板代碼，如?HTML、組件等，填充的內(nèi)容會(huì)替換子組件的<slot></slot>標(biāo)簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue3中使用pinia,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
Mint UI實(shí)現(xiàn)A-Z字母排序的城市選擇列表
這篇文章主要為大家詳細(xì)介紹了Mint UI實(shí)現(xiàn)A-Z字母排序的城市選擇列表，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
本篇文章主要介紹了Vuex之理解state的用法實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
Vue中watch、computed、updated三者的區(qū)別及用法
這篇文章主要介紹了Vue中watch、computed、updated三者的區(qū)別及用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要給大家介紹了關(guān)于如何完全掌握Vue中$set方法的相關(guān)資料,vue中$set方法對(duì)數(shù)組和對(duì)象的處理本質(zhì)上的一樣的,對(duì)新增的值添加響應(yīng)然后手動(dòng)觸發(fā)派發(fā)更新,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2023-03-03
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)前端列表拖拽功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2023-12-12
這篇文章主要介紹了vue3如何實(shí)現(xiàn)單點(diǎn)登錄問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03