您现在的位置是：网站首页> 编程资料编程资料
vue实现微信公众号h5跳转小程序的示例代码第1/3页_vue.js_
2023-05-24
362人已围观
简介 vue实现微信公众号h5跳转小程序的示例代码第1/3页_vue.js_
项目概述
实现类似图中红色框框选中可以左右滑动的组件，点击可以跳转到对应的小程序页面。
涉及知识点
- 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 相关文章
今天小编就为大家分享一篇vue之组件内监控$store中定义变量的变化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue中对象数组去重的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要为大家介绍了Vue编程三部曲之将template编译成AST示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了浅谈vue.watch的触发条件是什么？具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
Vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,下面这篇文章主要给大家介绍了关于Vue生命周期和钩子函数的相关资料,需要的朋友可以参考下2021-10-10
这篇文章主要为大家介绍了前端vue架构插槽slot使用教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-02-02
这篇文章主要为大家详细介绍了Vue使用Echart图标插件之柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家介绍了vue保存自动格式化换行，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要给大家介绍了关于Vue在ie10下空白页的debug相关资料，这是最近在工作中遇到的一个问题，通过查找相关的资料终于解决了，文中通过示例代码介绍的非常详细，需要的朋友可以参考下2018-05-05
点击排行
本栏推荐
