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

目录

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

项目概述

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

涉及知识点

• 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下一页阅读全文
   
   
   
   
                            

                        

• 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

最新评论