项目概述

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

涉及知识点

  • 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中定义变量的变化详解

    vue之组件内监控$store中定义变量的变化详解

    今天小编就为大家分享一篇vue之组件内监控$store中定义变量的变化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue中对象数组去重的实现

    vue中对象数组去重的实现

    这篇文章主要介绍了vue中对象数组去重的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Vue编程三部曲之将template编译成AST示例详解

    Vue编程三部曲之将template编译成AST示例详解

    这篇文章主要为大家介绍了Vue编程三部曲之将template编译成AST示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 浅谈vue.watch的触发条件是什么

    浅谈vue.watch的触发条件是什么

    这篇文章主要介绍了浅谈vue.watch的触发条件是什么?具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue生命周期和钩子函数的详解与经典面试题

    Vue生命周期和钩子函数的详解与经典面试题

    Vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,下面这篇文章主要给大家介绍了关于Vue生命周期和钩子函数的相关资料,需要的朋友可以参考下
    2021-10-10
  • 前端架构vue架构插槽slot使用教程

    前端架构vue架构插槽slot使用教程

    这篇文章主要为大家介绍了前端vue架构插槽slot使用教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-02-02
  • Vue使用Echart图标插件之柱状图

    Vue使用Echart图标插件之柱状图

    这篇文章主要为大家详细介绍了Vue使用Echart图标插件之柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 详解vue保存自动格式化换行

    详解vue保存自动格式化换行

    这篇文章主要为大家介绍了vue保存自动格式化换行,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • 关于Vue在ie10下空白页的debug小结

    关于Vue在ie10下空白页的debug小结

    这篇文章主要给大家介绍了关于Vue在ie10下空白页的debug相关资料,这是最近在工作中遇到的一个问题,通过查找相关的资料终于解决了,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2018-05-05
  • vue监听页面滚动到某个高度触发事件流程

    vue监听页面滚动到某个高度触发事件流程

    这篇文章主要介绍了vue监听页面滚动到某个高度触发事件流程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部