1. 底部点击刷新1.1 先增加一个按钮 render() {if(!this.state.data){return(<Text>Loading... </Text>)}else{return(<ListViewrefreshControl={<RefreshControl refreshing = {false}onRefresh = {this.reloadWordData.bind(this)}/>}dataSource={this.state.data}renderRow={(rowData)=>this.renderRow(rowData)}renderFooter={this.renderFooter.bind(this)}></ListView>);}}renderFooter(){return (<View style={{marginVertic...
前言 最近几个人合作完成了一个项目，发现有一些公用的基础业务组件，可以提取出来，不仅方便大家在各自模块直接引用，也可以在以后的项目中使用。想到了可不可以自己动手把组件打包发布到内部的npm上，避免以后小伙伴们的重复工作呢？于是乎，说干就干，在这里操练一下，写个todo-list的vue组件案例。案例源码：https://github.com/wuwhs/todoList 建立npm项目 1. 初始化npm项目 建一个文件夹（todoList），在这个文件夹路径下打开...
todolist demo最近有空重新看了一下vuex,然后又写了一个todolist小demo,原理比较简单,主要是自己规范了一下代码的写法.下载地址 :vue-test_jb51.rar效果图根组件<template><div class=container><h1 class=title>todo list demo</h1><type-filter:types=types:filter=filter:handleUpdateFilter=handleUpdateFilter/><add-todo :handleAdd=handleAdd /><todo-itemv-for=(item,index) in list:key=item.id:index=index:data=item:fi...
实例如下所示： <template><div class="hello"><h1>{{ msg }}</h1><h2>Foo</h2><div v-for ="(item, index) in list"><!--<p>{{item }}</p>--><h1 v-show="false">{{a[index] = item.bb}}</h1><!-- <h1>index:{{index}}</h1>--></div><h2>a:{{a}}</h2><h2>{{cc}}</h2><!--<button v-on:click="cc">点击</button>--></div> </template> <script> export default {name: foo,data () {return {msg: 这儿是Foo,list:[{insertId: asfas...
该项目主要可以练习js操控dom，事件，事件触发之间的逻辑关系，以及如何写入缓存，获取缓存。主要功能： 将用户输入添加至待办项可以对todolist进行分类，用户勾选即将待办项分入已完成组todolist的每一项可删除和编辑将用户输入数据写入localStorage本地缓存，实现对输入数据的保存可以清楚域名下本地缓存，并清空所有todolist项具体功能的实现 HTML代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>to...
本文实例讲述了原生JS实现循环Nodelist Dom列表的4种方式。分享给大家供大家参考，具体如下： function $(id) {return document.getElementById(id); } var _PAGE = {timeListDom: $(timeList) }; var spanDoms = _PAGE.timeListDom.querySelectorAll(span), domLen = spanDoms.length; // 第一种方式：原生for循环 for (var i = 0; i < domLen; i++) {var v = spanDoms[i];// do something you want deal with DOM } // 第二种方式...
有时需要从配置文件中读取信息，然后添加到用户的选择项中，比如select的option选项，下面针对此类情况做了一个实例 内容如下： <!DOCTYPE html> <html> <head> <title>鼠标点击时加载</title> <script type="text/javascript" src="jquery-1.8.3.js"></script> </head> <body> 选择城市:<input type="text" name="cname" list="cities"/><br/> <datalist id="cities"> </datalist> </body> </html> <script type="text/javascript...
classList属性的方法：add();remove();toggle(); 描述，在一些页面我们需要使用两个按钮来回切换，如图：我们要使用到add()和remove()方法 html部分: <div class="login-title"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="mya1" id="mya" onclick="myonclick()">注册</a> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="mya2" id="myaa" oncl...
我们在topNav这个页面上插入一个todolist子组件 我不知道怎么回事，这里的markdown的代码总是串行。。所以代码看得不舒服，见谅啊，我最后会放github的源代码地址。 1. 父组件topNav中注册子组件，引入子组件 <template><div><p>下面这一行就是定义的组件名称</p><todo-list></todo-list><router-view></router-view></div> </template> <script> /* 1. 通过import来引入我们的子组件drawerLayout 2. 引入子组件，并重新取名...
前言 多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点杀鸡用牛刀。Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁，业务清晰。 首先分析以...
又是很久不写博客了，最近在用蚂蚁金服的ant-design-pro写毕设，写着写着写不下去了，很多东西都不理解，不得不说大神写出来的东西都是需要花学习成本的，或者底子好，对于React新手来说就有点难了。所以就老老实实的认真看了下Redux到底如何使用，在这里推荐一下自己最近在看的书，写的算是比较详细的：《深入React技术栈》。废话不多说，今天就分享下自己如何使用redux来实现一个todoList的，希望对想要用redux的你会有所帮助。 ...
看了两天的Vue，还是上手写一个简单的todolist更实用（文末有彩蛋）。 一、使用vue-cli脚手架快速搭建一个框架 利用vue-cli来自动生成我们项目的前端目录及文件，方法： npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev这样我们的一个基于webpack的vue项目目录就可以快速构建好了。目录如下：二、完成一个简单的todolist 接下来就看一下webpack.base.conf文件，这是核心文件，必须执行...
在RN中FlatList是一个高性能的列表组件，它是ListView组件的升级版，性能方面有了很大的提升，当然也就建议大家在实现列表功能时使用FlatList,尽量不要使用ListView，更不要使用ScrollView。既然说到FlatList，那就先温习一下它支持的功能。 完全跨平台。支持水平布局模式。行组件显示或隐藏时可配置回调事件。支持单独的头部组件。支持单独的尾部组件。支持自定义行间分隔线。支持下拉刷新。支持上拉加载。支持跳转到指定行（Scro...
之前使用的组件是ListView，当时要添加一个下拉刷新，上拉加载的功能，所以对ListView做了一些封装，但是后来看官方文档，不建议再使用ListView，因为效率问题，做过Android的朋友都知道，Android的ListView如果不自己处理一下，也是有效率问题的。所以官方又推出了FlatList，而且自带上拉下拉的功能。 功能简介 完全跨平台。支持水平布局模式。行组件显示或隐藏时可配置回调事件。支持单独的头部组件。支持单独的尾部组件。支持自...
写在前面： 对于可移动的列表框，ligerui中也对其进行了封装，可以直接照着demo拿来用，不过那都是直接在页面上静态初始化的数据，那么如何从后台获取？ 前面有了对ligerui的一些组件的使用经验后，在这里其实 对于从后台获取数据在前台页面进行显示，都大同小异。也不是很难。 即要么是在ligerui组件中直接使用其url属性向后台发送请求，要么是单独发送一个ajax请求拿到数据后，通过获取组件，然后设置其data属性。嘿嘿。。 下面就...