本文主要是介绍zepto classnames，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
如果基于zepto.js开发，一般是通过event.touches[0]来获取属性。重要属性如下：clientX,clientY:触摸点相对于浏览器窗口viewport的位置;pageX,pageY:触摸点相对于页面的位置;screenX,screenY：触摸点相对于屏幕的位置 ;identifier:touch对象的unique ID
touchstart:手指触摸屏幕上的时候触发
touchmove:手指在屏幕上移动的时候触发
touchend:手指从屏幕上拿起的时候触发
touchcancel:系统取消touch事件的时候触发
2.使用classnames这个小工具来拼接 classNames:
// BEFORE:
var Button = React.createClass({
render () {
var btnClass = 'btn';
if (this.state.isPressed) btnClass += ' btn-pressed';
else if (this.state.isHovered) btnClass += ' btn-over';
return <button className={btnClass}>{this.props.label}</button>;
}
});
// AFTER ：
var classNames = require('classnames');
var Button = React.createClass({
render () {
var btnClass = classNames({
'btn': true,
'btn-pressed': this.state.isPressed,
'btn-over': !this.state.isPressed && this.state.isHovered
});
return <button className={btnClass}>{this.props.label}</button>;
}
});
大家有任何意见都可以直接在评论区指出，谢谢。
未完待续...
在React中编写模板时给标签添加class。
如果是固定的className="XX"就可以了。
如果要根据状态值动态应用或去除，
或使用多个class时就麻烦了。
可以使用classnames模块来解决：
var classnames= require('classnames');
classnames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
classNames('a',['b',{c:true}])
它有多种使用，参数要以是多个，可以是字符串，也可以是对象,还可以是数组。组成使用也可以
，通过值的true false来判断是否应用
<div className={classnames('h1 h2')} >
className={classnames({'a':true,'b':false})}
在react中需这样使用
这篇关于zepto classnames的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
