1 写在前面 看来《JavsScript高级编程》，想做一个小demo练练自己的手，选择了贪吃蛇游戏。由于以前都是用c#写的，将贪吃蛇写到一个类里面，然后一个一个小方法的拆分，只向外提供需要提供的方法。这样就可以将贪吃蛇作为一个模块，任何地方都可以复用的。然而，用js进行编写的时候，由于不能很好的利用js语言的特性进行模块化编程，所以第一版的实现完全采用面向过程的方式，将函数中所需要的变量全部声明为全局变量。虽然这样也能...
movable-area是微信小程序的新组件，可以用来移动视图区域movable-view。移动方向可选择任何、垂直和平行。可移动区域里包含其他文本、图片、按钮等组件。可移动区域可绑定touchend等事件。movable-view的参数可调整动画效果。 先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:"可移动的视图容器，在页面中可以拖拽滑动". 官方文档地址: https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-vie...
本文介绍了React Native仿美团下拉菜单的实例代码，最近也在学习React Native，顺便分享给大家 在很多产品中都会涉及到下拉菜单选择功能，用的最好的当属美团了，其效果如下： 要实现上面的效果，在原生中比较好做，直接使用PopWindow组件即可。如果使用React Native开发上面的效果，需要注意几个问题： 1、 在下拉的时候有动画过度效果； 2、下拉菜单出现后点击菜单项，菜单项可选择，并触发对应的事件； 3、下拉菜单中的项目可以...
在原生APP开发中，相信很多开发者都会见到这种场景：点击右上角更多的选项，弹出一个更多界面供用户选择。这种控件在原生开发中Android可以用PopupWindow实现，在iOS中可以用CMPopTipView,也可以自己写一个View实现。其类似的效果如下图所示： 实现思路分析： 要实现上面的视图，有很多种实现方式。前面的文章说过，要实现弹框相关的可以用React Native 提供的 Modal组件(Modal组件)，使用Modal组件可以实现我们原生开发中的大多数...
城市列表选择是很多app共有的功能，比如典型的美图app。那么对于React Native怎么实现呢？ 要实现上面的效果，首先需要对界面的组成简单分析，界面的数据主要由当前城市，历史访问城市和热门城市组成，所以我们在提供Json数据的时候就需要将数据分为至少3部分。 const ALL_CITY_LIST = DATA_JSON.allCityList; const HOT_CITY_LIST = DATA_JSON.hotCityList; const LAST_VISIT_CITY_LIST = DATA_JSON.lastVisitCityList;而要实现字...
本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码，分享给大家，也给自己留个笔记。在项目中尝试了mockjs，mock数据，实现前后端分离开发。 关于mockjs，官网描述的是 1.前后端分离 2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。 3.数据类型丰富 4.通过随机数据，模拟各种场景。 等等优点。 总结起来就是在后端接口没有开发完成之前，前端可以用已有的接口文档，在真实的请求上拦截ajax，并根据moc...
废话不多说了，直接给大家贴代码了，具体代码如下所述： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{width:200px;} </style> </head> <body> <div id="wrap"> <img src="images/DSC_3496.jpg" style="position:absolute;width: 200px;z-index:100"> <img src="images/DSC_3949.jpg" style="position:absolute;width: 300px;"> <img src="images/DSC_3172.jpg" style="wid...
写在前面： 这次我主要想总结一下微信小程序实现上下滚动消息提醒，主要是利用swiper组件来实现，swiper组件在小程序中是滑块视图容器。 我们通过vertical属性（默认为false,实现默认左右滚动）设置为true来实现上下滚动。 （需要注意的是：只要你的swiper存在vertical属性，无论你给值为true或者false或者不设参数值，都将实现上下滚动） 从深圳回来做了一个微信小程序的小项目，令人欣慰的一点事是，回来很快时间内把在深圳两天...
浏览器上传图片到服务端，我用过两种方法： 1.本地图片转换成base64，然后通过普通的post请求发送到服务端。 操作简单，适合小图，以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提交。 form表单提交图片会刷新页面，也可以时form绑定到一个隐藏的iframe上，可以实现无刷新提交数据。但是如果想传输多条form表单数据，需要写很多dom，同时还要写iframe，太麻烦。 目前感觉比较干净的办法就是通过axios的post请求，发送for...
基于webpack 2.3的标准语法，包含了less变量替换、React组件热加载、第三库单独输出、区分生产与开发环境等常用配置。 use strictmodule.exports = function( env ) {// 生成环境下webpack使用-p参数开启代码压缩// webpack[-dev-server]使用--env dev参数指定编译环境var isDev = env == dev;var path = require( path );var webpack = require( webpack );var CleanWebpackPlugin = require( clean-webpack-plugin );var CopyWeb...
本文介绍了vue中七牛插件使用，我也正在学习，分享给大家，顺便留个笔记，废话不说了，如下：<template><div id="cxUpload" class="cx-upload"><button id="pickfiles" class="uploadBtn">上传</button> </div> </template><script>// import $ from jquery// import "../../common/plugin/qiniu/moxie"// import "../../common/plugin/qiniu/plupload.dev"// import "../../common/plugin/qiniu/qiniu"import * as tools from ../...
<!DOCTYPE html> <html><head><title>图片轮播</title><style>div{border: 1px solid red;width:218px;height: 218px;}.show{display: inline-block;}.hide{display: none;}</style><meta charset="UTF-8"></head><body><!-- onmouseover="" 鼠标悬停事件onmouseout="" 鼠标离开事件--><div onmouseover="pause1();" onmouseout="lunbo();"><img src="../images/01.jpg" class="show"/><img src="../images/02.jpg" class="hide"/>...
数据结构为数组中包含对象--树形结构，用Vue组件的写法实现以下的效果：树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用knockout.js的实现方法。 html代码<div id="table-component-div"><table-component v-for="item in data1" v-bind:list="item"></table-component></div>组件模板代码 <script type="text/x-template" id="table-component-template"><div clas...
本文介绍了Vue2.0利用vue-resource上传文件到七牛，分享给大家，希望对大家有帮助 关于上传，总是有很多可以说道的。16年底，公司项目番茄表单的前端部分，开始了从传统的jquery到vue 2.0的彻底重构。但是上传部分，无论是之前的传统版本，还是Vue新版本，都是在使用着FileAPI这款优秀的开源库，只是进行了简单的directive化。为什么呢？因为兼容性。没办法，公司项目不等同于个人项目，必须要考虑大多数浏览器。否则，上传部分完全...
整理文档，搜刮出一个vue2.0的contextmenu右键弹出菜单的实例代码，稍微整理精简一下做下分享。 1.事情对象 <!DOCTYPE html> <html> <head><title></title><meta charset="utf-8"><script src="http://unpkg.com/vue/dist/vue.js"></script><script type="text/javascript">window.onload = function(){var vm = new Vue({el:#box,methods:{show:function(event){console.log(event); //event 这个就是事件对象了}}});}</script>...