工作遇到的问题之 -- mpvue写小程序

如何使用mpvue做小程序,引入公共的common.css

随意在目录下建一个common.css文件,然后再App.vue中以import的形式 引入;

  ====》App.vue中

实现轮播图

使用微信小程序默认的swiper

swiper组件
使用的页面和vue引入组件一样 
<template>
    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular">
        <block v-for="(item, index) in images" :key="index">
            <swiper-item>
                <image :src="item.url" class="slide-image" mode="aspectFill"/>
            </swiper-item>
        </block>
    </swiper>
</template>

<script>
export default {
  props: {
    images: {
      type: Array
    }
  },
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      circular:true,
      interval: 3000,
      duration: 500
    };
  }
};
</script>

<style scoped>
.swiper {
  height: 376rpx !important;
}
image {
  height: 100%;
  width: 100%;
}
</style>

  

html:<Swiper :images="info.image" />

export default{ components: {Swiper},}

原文地址:https://www.cnblogs.com/fyjz/p/11693194.html

时间: 2024-10-11 12:09:51

工作遇到的问题之 -- mpvue写小程序的相关文章

使用mpvue开发小程序教程(二)

在上篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来.在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构. 在Visual Studio Code里面打开项目文件夹,我们可以看到类似如下的文件结构: firstapp ├── package.json ├── project.config.json ├── static ├── src │ ├── components │ ├── pages │ ├── ut

使用mpvue开发小程序教程

从vue到mpvue再到微信小程序,这么几天下来感觉被搞晕了.三者之间的很多功能存在差异,项目也快接近尾声了,坑也踩了很多了,现在给后来的你们一点总结性经验: 1. 在模板中,动态插入HTML的v-html指令不可用 这条很好理解,小程序的界面并不是基于浏览器的BOM/DOM的,所以不能动态的在界面模板里直接插入HTML片段来显示. 题外话,如果有在小程序里插入html片段的需求怎么办?可以用<rich-text>组件或者wxParse(https://github.com/icindy/wx

使用mpvue开发小程序教程(六)

在上一章节中,我们列举了在Vue中能用但在mpvue中不能用或需要特别注意的特性,在实际开发前了解一下还是很有必要的,可以避免浪费找错误的时间. 如果你使用过原生的小程序框架,你一定经历过或思考过怎么解决以下的问题: 怎么存放可全局访问的变量? 页面跳转的时候,怎么传递参数到下一个页面比较好? 页面返回上一页的时候,怎么传递当前页的数据到上一页? 多个页面间需要同步数据,怎么做比较好? 网上一搜,解决的方法通常也是五花八门的,什么通过app上的globalData啊.通过存取storage啊.通

全网首发mpvue课程小程序全栈开发

第1章 课程简介 本章节介绍了课程概述,教学方式 ,还有小程序项目的演示. 第2章 原生小程序 对原生小程序做一个入门的介绍,包括小程序帐号申请和开发工具安装和使用,小程序目录文件的讲解,再简单把小程序原生的组件和API过一下. 第3章 使用vuejs开发小程序 本章节用一个todolist案例,带着vuejs入门,再用mpvue的方式重写这个案例,为实战项目开发打好基础. 第4章 koa2入门 本章节讲解 koa2入门相关的基础知识点,为实战项目的服务器开发部分做准备,其中包括,使用koa2开

全网首发mpvue课程小程序全栈开发视频课程 小程序实战教程 完整版

第1章 课程简介本章节介绍了课程概述,教学方式 ,还有小程序项目的演示. 第2章 原生小程序对原生小程序做一个入门的介绍,包括小程序帐号申请和开发工具安装和使用,小程序目录文件的讲解,再简单把小程序原生的组件和API过一下. 第3章 使用vuejs开发小程序本章节用一个todolist案例,带着vuejs入门,再用mpvue的方式重写这个案例,为实战项目开发打好基础. 第4章 koa2入门本章节讲解 koa2入门相关的基础知识点,为实战项目的服务器开发部分做准备,其中包括,使用koa2开发web

全网首发mpvue课程 小程序全栈开发

第1章 课程简介本章节介绍了课程概述,教学方式 ,还有小程序项目的演示.1-1 课程简介1-2 github 获取源码1-3 github 桌面版简单管理代码1-4 git 命令行的使用1-5 mpvue 和 wepy 区别 第2章 原生小程序对原生小程序做一个入门的介绍,包括小程序帐号申请和开发工具安装和使用,小程序目录文件的讲解,再简单把小程序原生的组件和API过一下.2-1 原生小程序 - 小程序帐号和开发工具2-2 原生小程序 - 项目目录结构2-3 原生小程序 - 项目app.json

写小程序的一些小坑

1.关于数据绑定的问题 小程序更新data后只是把数据的值更新,不会刷新页面,比如滑动的列表不会回到顶部,导致使用swiper有个小bug: 就是swiper的数据是后台请求的,可通过切换tab标签动态获取,如果在切换之前swiper处在第三张或者更多(比将要点击的tab下的swiper多),那切换后swiper会是空白,解决办法是,每次切换要手动初始化swiper的current  属性,使其停留在第一张. 2.关于生命周期的问题 生命周期函数不要写成箭头函数,否则this会取不到 切换底部导

mpvue支持小程序的分包加载

这个功能可以说是让我们这些用mpvue的等的很焦灼,眼看着项目的大小一天天地逼近2M,mpvue还不能很好地支持分包加载,这可咋整?好消息是最近mpvue要支持分包加载了,不过目前在develop分支下面.下面我们一步步来看看怎么初始化一个支持分包加载的mpvue项目. clone mpvue-quickstart模板 初始化一个mpvue项目是基于mpvue-quickstart项目模板的,使用的是下面的命令: vue init mpvue/mpvue-quickstart my-projec

美团小程序框架mpvue入门教程

自打写了 美团小程序框架mpvue蹲坑指南, 一发不可收拾,今天趁周末空闲,来写个mpvue(没朋友)的简单入门教程,本教程只针对新手,老鸟勿喷. 另外,我还专门为本文做了一个简单的项目,如果懒得从头开始搭项目的童鞋,可以直接去我的 github上克隆到本地, 安装一下依赖,即可直接在此基础在开发,不需要做任何配置.如果你觉得该项目对有帮助, 请顺便给我Star,你们的支持是我最大的动力,谢谢! 好了,我们进入主题,首先,请允许引用一下美团官方对mpvue的介绍 mpvue是一个使用 Vue.j