vue实现微信公众号h5跳转小程序的示例代码第1/3页

目录

• 项目概述
• 涉及知识点
• 实现
• 实现容器
• computed 实现分页

项目概述

实现类似图中红色框框选中可以左右滑动的组件，点击可以跳转到对应的小程序页面。

涉及知识点

• 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
公众号
跳转
小程序

相关文章


vue resource post请求时遇到的坑
这篇文章主要介绍了vue resource post请求时遇到的坑,需要的朋友可以参考下
2017-10-10

深入理解vue2.0路由如何配置问题
本篇文章主要介绍了vue2.0路由配置问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07

vue中this.$parent的使用方式
这篇文章主要介绍了vue中this.$parent的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03

VUE实现一个Flappy Bird游戏的示例代码
这篇文章主要介绍了VUE实现一个Flappy Bird的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04

Vue生命周期中的八个钩子函数相机
这篇文章主要为大家介绍了Vue生命周期中的八个钩子函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12

vue cli 3.0通用打包配置代码,不分一二级目录
这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09

vue.js实现请求数据的方法示例
这篇文章主要给大家介绍了vue.js实现请求数据的方法示例，文中分别介绍了vue1.0和vue2.0的示例方法，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-02-02

Vue scoped及deep使用方法解析
这篇文章主要介绍了Vue scoped及deep使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08

浅谈将three项目迁移至vue项目遇到的问题
本文主要介绍了将three项目迁移至vue项目遇到的问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01

Vue 获取数组键名的方法
本篇文章主要介绍了Vue 获取数组键名的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06

最新评论