自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(238)
  • 资源 (6)
  • 收藏
  • 关注

原创 vux使用教程

. 在项目里安装vuxnpm install vux --save. 安装vux-loader (这个vux文档似乎没介绍,当初没安装结果报了一堆错误) npm install vux-loader --save-dev. 安装less-loader  (这个是用以正确编译less源码,否则会出现 ' Cannot GET / ')npm install less less-l

2017-10-17 22:52:06 25631 6

原创 微信公众号开发入门教程

1、申请注册一个公众号,个人的就可以了,然后进入测试号,如下图:(测试账号,除了支付其他的都可以用)2、获取用户信息:(1)前端代码:前端需要先获取code然后传给后端获取用户信息,之后就可以尽情的玩耍了,获取code方式如下(其中appid,点击上图测试号,里面就可以获取到appid,redirect_uri,就是你的跳转url,code参数就会传到这个链接里面)第一步:

2017-09-26 15:16:27 564

原创 七牛云以及video.js的用法教程

1、七牛云用法:(1)注册账号之后还需要通过验证之后才能使用。(2)初次使用需要创建空间,如图:(3)上传小于500M的文件,如图:(4)上传大于500M的文件,点击上传文件按钮,会出现如图:点击打开,然后选择如图:

2017-09-23 10:04:29 3047

原创 web前端开发小助手

1、css:以下是横向滚动和隐藏横向滚动条,移动端浏览器基本都是webkit内核,所以兼容性不用考虑<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javas

2017-06-27 08:49:50 927

原创 css中的rem的使用核心

(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth

2017-06-13 14:24:48 770

原创 html和css初始化代码

标题 html,body,div,ul,li,ol,p,a{margin: 0px;padding: 0px;position: relative;overflow: hidden;} em{font-style: normal;} ul{list-style: none;} button,input,img{border: none;outline: n

2017-05-14 14:26:59 1743

原创 web前端px和rem自动转换插件

下载地址:百度云下载(当然你也可以到github下载github下载)(1)导入插件方法:进入packages目录:Sublime Text -> Preferences -> Browse Packages...* 复制下载的cssrem目录到刚才的packges目录里(2)配置方法:{    "px_to_rem": 60, //px转rem的单位比例,默认为4

2017-03-17 19:42:08 8511 1

原创 web的请求方法

JQuery的get方法:php代码:<?php header('Access-Control-Allow-Origin:*'); $value=$_GET["key"];echo $value;?>html代码:$.get("http://localhost/new_file.php?key=value",function(data,status){ co

2017-03-05 20:55:23 772

原创 web旋转动画

body{ text-align: center; } div{ display: inline-block; }.box{ display: inline-block; width: 1000px; height: 500px; position: relative; text-align: center;}.child{ top: 100px; text-al

2017-03-02 12:57:36 850

原创 web实现跑马灯

由于代码比较少,我就写在一个文件里了 //ready(),这个方法在html元素加载完毕才会执行 $(document).ready(function(){ //穿入一个box即可 startInterval($(".box")); function startInterval(box){ var ul = box.find("

2017-02-26 17:28:14 5086

原创 web实现轮播图

html代码

2017-02-26 13:05:56 6904 3

原创 实现侧边栏效果,上拉到一定程度自动停止

全部代码如下: window.onscroll=function(){ var top = document.documentElement.scrollTop||document.body.scrollTop; if(top>650){ var side = document.getElementById("side"); side.

2017-02-23 16:12:54 514

原创 vue路由切换动画

第一步,使用账号注册阿里云图标账号。第二步,创建项目,如图:(1)(2)创建项目第三步:把图标加入购物车,然后添加到项目(1)把图标添加购物车(2添加至项目)最后一步:下载下来解压之后里面有demo,如果对你有帮助,在下面点个赞吧,哈哈

2017-02-22 09:43:46 3465

原创 vue使用mint-ui实现上拉刷新

加上stop方法是解决当鼠标多次触发时的不好体验,比如经过鼠标多次触摸之后,当鼠标停下来,事件还在运行,此时加上stop()即可。$(document).ready(function(){ $(".popup_div").mouseenter(function(){ $(".popup_div").stop().animate({bottom:'0px'},1000,"swi

2017-02-19 22:34:49 1181

原创 web前端常用网址

前端开发框架 :http://www.5ibobo.com/code/513.htmlHTML5开发教程 :http://www.hcoder.net/course/info_212.html

2017-01-13 15:51:11 826

原创 css3动画记录篇

$(document).ready(function(){ //mouseover获得鼠标焦点被触发 $("#div1").mouseover(function(){ //使显示,1代表速度 $("#div2").fadeIn(1); }); //mouseover失去鼠标焦点被触发 $("#div1").mouseout(function(){ //使隐藏,1代表速度

2016-12-30 20:45:36 395

原创 vuex的基础用法

http://www.jq22.com/  插件库

2016-12-20 17:03:53 646

原创 vue-cli项目使用scss

介绍一个vue项目给大家学习,阅读别人的项目可以快速提高自己哦, 移动端vue完整项目安装node-sass+sass-loader+style-loader,进入webpack.base.config.js配置scss。所以增加如下:{        test: /\.vue$/,        loader: 'vue-loader',        options: {          l...

2016-10-10 21:30:04 994

原创 vue-cli构建项目教程

String str = "abcdef"; String str1 = str.replaceAll("abc","aaaaa"); str1值为:aaaaadef

2016-09-08 17:29:44 362

原创 vue开发环境配置记录

下载sdk后把libs文件夹里面的包导入,然后在app的构建文件里的安卓{}括号里加入如下即可:sourceSets { main.jniLibs.srcDirs = ['libs']}Bmob的查询数据方法请见:http://blog.csdn.net/chjr1000/article/details/50358420

2016-09-04 22:48:39 984

原创 sublime text记录

http://www.imooc.com/learn/254

2016-08-20 17:50:14 490

原创 git的一些操作(记录)

git config --global user.name "value"  //配置你的用户名。git config --global user.email "邮箱" // 配置你的邮箱。cd f: //意思是进入到f盘目录下。git init //创建代码仓库。ls -al //用来查看.git文件夹。git add . //表示将整

2016-08-10 18:03:14 494

原创 SVN创建分支

第一步在你的需要创建分支的项目上右击,如图:第二步,填上在服务器上你创建的分支文件夹,如图:完成,如图:(记得要刷新)本文参考自:http://www.cnblogs.com/liaojie970/p/4881997.html

2016-06-18 09:55:45 439

原创 SVN的简单使用入门

1,首先来下载和搭建SVN服务器,下载地址如下: http://subversion.apache.org/packages.html2,安装好之后启动如下图:3,右击左侧的Repositories创建版本库,如图4,建好版本库之后要做的事,如图:5,android studio 上的操作,如图6,android studio关联版本库,

2016-06-17 23:24:24 407

原创 ps 技巧

1居中参考线:(1)首先获得画布的大小(2)第二步,从视图里选中新参考线,里面的里面是画布的总长或宽除以2就是中间的位置了2 画正圆:(1)选中椭圆选框工具(2)鼠标箭头就是圆心的位置,按住shift+alt键,双击你选好的圆心位置拖动即可,下图是白色透明底,白色的圆,由于放大的倍数太大所以看起来模糊,缩小就好了(3)给画好的圆上色:

2016-05-24 14:00:28 843

原创 axios解决OPTIONS问题,导致后台无法接收到数据

先贴一下正确的代码this.$http({ url: 'http://shiyun.looky34.cn/client/members/getMembers', method: 'POST', data:this.$qs.stringify({ name: '小明' }) }).then((res)

2018-01-09 20:24:54 19362 6

原创 前端input获取文件然后显示

Document var result=document.getElementById("result"); var file=document.getElementById("file"); //判断浏览器是否支持FileReader接口 if(typeof FileReader == 'undefined'){

2018-01-08 10:38:46 2699

原创 前端websocket使用教程(聊天功能)

Java后端WebSocket的Tomcat实现              Welcome 发送消息 关闭WebSocket连接 var websocket = null; //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { webs

2017-12-06 16:28:02 5708

原创 微信分享

wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: json.data.appId, // 必填,公众号的唯一标识 timestamp: json.d

2017-11-20 15:35:07 475

原创 css3加载中动画

28个纯css3 加载loading动画特效

2017-11-16 07:38:23 485

原创 小程序小结

1、小程序登录网址:https://mp.weixin.qq.com2、创建小程序项目的时候需要appId,在小程序的后台设置处进行获取,还需要在开发设置项设置安全域名

2017-11-13 14:58:10 397

原创 省市区联动(原生js实现)

三级联动 window.onload = function() { var oDiv = document.getElementById("div"); var sheng = document.createElement("select"); var shi = document.cre

2017-11-09 08:52:37 2483

原创 vue中使用less方法

第一步:安装less依赖,npm install less less-loader --save第二步:修改webpack.config.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加{test: /\.less$/,loader: "style-loader!css-loader!less-loader",},现在基本上已经安装完

2017-11-03 11:03:44 1910

原创 canvas合成文本与图片

1,原生合成Html5 Canvas 实现图片合成 |img{ border:solid 1px #ddd;} function hecheng(){draw(function(){document.getElementById('imgBox').innerHTML='合成图片成功!可以鼠标另存图片查看我是否是一张图片~~!';}) }va

2017-10-27 17:31:07 1635

原创 微信公众号分享php代码(tp5)

public function ticket(){ if(request() -> isAjax()){ //包装curl的方法 function get_curl_contents($url, $method ='GET', $data = array()) { if ($method == 'P

2017-10-09 18:04:55 1395

原创 使用过的vue组件记录

1、pc端裁剪头像,使用的是vue-core-image-upload, github地址:https://github.com/Vanthink-UED/vue-core-image-upload2、开始使用 cnpm i vue-core-image-upload --save3、 代码:    class="btn btn-primary"    crop="loca

2017-09-23 16:31:48 1162

原创 vue使用百度地图记录

{{streetNumber?streetNumber:''}} {{address?address:''}} @import '../../styles/commonscss.scss'; .home_map .map{width: 100vw;height:100vh; position: fixed;} .home_map .info

2017-09-06 21:58:50 1404

原创 vue项目开发配置信息

main.js配置import Vue from 'vue'import App from './App'import store from './store/'import axios from 'axios'import $ from 'jquery'import YDUI from 'vue-ydui'import 'vue-ydui/dist/ydui.rem.css'

2017-08-18 16:57:08 554

原创 opencart

https://www.opencart.cn/download/

2017-08-17 06:37:03 474

原创 wordPress使用记录

1、下载phpStudy并安装。2、下载wordpress,点击打开链接3,下载好之后,解压wordpress,解压好之后,把文件夹放到本地服务器WWW目录下,然后打开里里面的readme.html文件,之后按照提示步骤完成即可。

2017-08-14 22:54:05 845

网络请求框架Volley

谷歌最近推出的网路请求框架,功能强大,使用简单,只需几行代码即可完成完成网络请求,适用于数据量不大的请求,比如加载图片,JSON,String等,具体使用方法请百度一下吧,很多教程的!

2016-08-13

解析JSON数据的gson库

这是一款出自谷歌公司的Gson库,用来解析JSON数据非常的简单,用法可以参考http://blog.csdn.net/revival_liang/article/details/51819969

2016-07-04

安卓《独立版Mat》内存分析工具

Android Studio自带的内存监控不够强大,所以我们应该选择独立版Mat来弥补这个不足,使用此工具让我们可以更好的分析内存的泄漏问题。

2016-06-20

SwipeListViewTest项目

先来看activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:swipe="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <com.fortysevendeg.swipelistview.SwipeListView android:id="@+id/example_lv_list" android:layout_width="match_parent" android:layout_height="match_parent" android:listSelector="#00000000" swipe:swipeActionLeft="dismiss" swipe:swipeActionRight="reveal" swipe:swipeAnimationTime="0" swipe:swipeBackView="@+id/back" swipe:swipeCloseAllItemsWhenMoveList="true" swipe:swipeFrontView="@+id/front" swipe:swipeMode="both" swipe:swipeOffsetLeft="0dp" swipe:swipeOffsetRight="0dp" swipe:swipeOpenOnLongPress="false" /> </RelativeLayout> 这里就一个swipelistview控件,我说几个不易理解的属性 表示滑动时的操作,dismiss表示滑动时删除,如果设置为reveal表示滑动时会显示出item后面的选项 swipe:swipeActionLeft=”dismiss” swipe:swipeActionRight=”reveal” 这个是背面布局的id(我们把直接看到的布局叫做前面的,滑动之后才能看到的布局叫做背面的),必须与背面布局id对应 swipe:swipeBackView=”@+id/back” 这个是滚动时候是否关闭背面的布局,true表示关闭,false表示不关闭,一般设置为true swipe:swipeCloseAllItemsWhenMoveList=”true” 这个是前面布局的id,要与布局的id对应 swipe:swipeFrontView=”@+id/front” both表示可以向左滑也可以向右滑,right和left分别表示只能向有或者向左滑动。 swipe:swipeMode=”both” 下面两个表示向左或者向右滑动时的偏移量,一般不在xml文件中设置,而是在代码中根据设置的大小来设置偏移量。 swipe:swipeOffsetLeft=”0dp” swipe:swipeOffsetRight=”0dp” 再来看看Item布局文件,这里包括前面的和后面的,两个重叠在一起: <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <!-- linearlayout中的布局是每一项后面隐藏的布局 --> <LinearLayout android:id="@+id/back" android:layout_width="match_parent" android:layout_height="80dp" android:background="#eee" android:tag="back" > <Button android:id="@+id/example_row_b_action_1" android:layout_width="0dp" android:layout_height="60dp" android:layout_gravity="center" android:layout_marginRight="10dp" android:layout_weight="1" android:text="测试" /> <Button android:id="@+id/example_row_b_action_2" android:layout_width="0dp" android:layout_height="60dp" android:layout_gravity="center" android:layout_marginLeft="10dp" android:layout_weight="1" android:text="删除" /> <Button android:id="@+id/example_row_b_action_3" android:layout_width="0dp" android:layout_height="60dp" android:layout_gravity="center" android:layout_weight="1" android:text="编辑" /> </LinearLayout> <!-- 这里是前台显示的布局 --> <RelativeLayout android:id="@+id/front" android:layout_width="match_parent" android:layout_height="80dp" android:background="#ffffff" android:orientation="vertical" android:tag="front" > <TextView android:id="@+id/example_row_tv_title" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textSize="18sp" /> </RelativeLayout> </FrameLayout> 这个布局是一个常规布局,我就不解释了。 MainActivity.Java,关键地方都有注释 public class MainActivity extends Activity { private SwipeListView mSwipeListView ; private SwipeAdapter mAdapter ; public static int deviceWidth ; private List<String> testData ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mSwipeListView = (SwipeListView) findViewById(R.id.example_lv_list); testData = getTestData(); //数据适配 mAdapter = new SwipeAdapter(this, R.layout.package_row, testData,mSwipeListView); //拿到设备宽度 deviceWidth = getDeviceWidth(); mSwipeListView.setAdapter(mAdapter); //设置事件监听 mSwipeListView.setSwipeListViewListener( new TestBaseSwipeListViewListener()); reload(); } private List<String> getTestData() { String [] obj = new String[]{"红楼梦","西游记","水浒传","管锥编","宋诗选注","三国演义","android开发高级编程","红楼梦","西游记","水浒传","管锥编","宋诗选注","三国演义","android开发高级编程"}; List<String> list = new ArrayList<String>(Arrays.asList(obj)); return list; } private int getDeviceWidth() { return getResources().getDisplayMetrics().widthPixels; } private void reload() { // mSwipeListView.setSwipeMode(SwipeListView.SWIPE_MODE_LEFT); // mSwipeListView.setSwipeActionLeft(SwipeListView.SWIPE_ACTION_REVEAL); // mSwipeListView.setSwipeActionRight(settings.getSwipeActionRight()); //滑动时向左偏移量,根据设备的大小来决定偏移量的大小 mSwipeListView.setOffsetLeft(deviceWidth * 1 / 3); mSwipeListView.setOffsetRight(deviceWidth * 1 / 3); // mSwipeListView.setOffsetRight(convertDpToPixel(settings.getSwipeOffsetRight())); //设置动画时间 mSwipeListView.setAnimationTime(30); mSwipeListView.setSwipeOpenOnLongPress(false); } class TestBaseSwipeListViewListener extends BaseSwipeListViewListener{ //点击每一项的响应事件 @Override public void onClickFrontView(int position) { super.onClickFrontView(position); Toast.makeText(getApplicationContext(), testData.get(position), Toast.LENGTH_SHORT).show(); } //关闭事件 @Override public void onDismiss(int[] reverseSortedPositions) { for (int position : reverseSortedPositions) { Log.i("lenve", "position--:"+position); testData.remove(position); } mAdapter.notifyDataSetChanged(); } } } 数据适配器: public class SwipeAdapter extends ArrayAdapter<String> { private LayoutInflater mInflater ; private List<String> objects ; private SwipeListView mSwipeListView ; public SwipeAdapter(Context context, int textViewResourceId,List<String> objects, SwipeListView mSwipeListView) { super(context, textViewResourceId, objects); this.objects = objects ; this.mSwipeListView = mSwipeListView ; mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); } @Override public View getView(final int position, View convertView, ViewGroup parent) { ViewHolder holder = null ; if(convertView == null){ convertView = mInflater.inflate(R.layout.package_row, parent, false); holder = new ViewHolder(); holder.mFrontText = (TextView) convertView.findViewById(R.id.example_row_tv_title); holder.mBackEdit = (Button) convertView.findViewById(R.id.example_row_b_action_3); holder.mBackDelete = (Button) convertView.findViewById(R.id.example_row_b_action_2); convertView.setTag(holder); }else{ holder = (ViewHolder) convertView.getTag(); } holder.mBackDelete.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { //关闭动画 mSwipeListView.closeAnimate(position); //调用dismiss方法删除该项(这个方法在MainActivity中) mSwipeListView.dismiss(position); } }); String item = getItem(position); holder.mFrontText.setText(item); return convertView; } class ViewHolder{ TextView mFrontText ; Button mBackEdit,mBackDelete ; } } 以上就是SwipeListViewTest的用法,希望对你有帮助

2016-05-23

BadgeView提示图标

2016-05-06

SwipeListView

SwipeListView

2016-05-06

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除