作者归档:misster-kaiji

(备忘) 让CSS3的Animation动画定格在最后

有时候用CSS3的Animation属性做动效演示,发现动画结束后总是自动回到最初始的一帧,如果想让动画定格在最后100%时的状态,之前的做法一直是在动画结束时通过回调函数用js直接把状态样式添加上去,虽然能解决问题,但感觉这样做很笨。

直到今天,才看到了这个属性:
animation-fill-mode
这条属性就是用来设置元素在动画完成后的样子

它接受的参数有三种状态:
backward/forward/both

backward:元素退回动画前的样子
forward:元素显示成动画完成后的样子
both:元素显示成动画前后的样子

这样就可以解决问题了
另:附上 说明文档 animation-fill-mode – CSS3参考手册
注:以上内容转载自 fangye Xu

基于jquery/zepto的 城市选择列表组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>城市选择列表</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="city-outer">
        <div class="citylist">
            <div class="list-wrapper">
                <div id="J_listContent" class="city-listview">
                   
                </div>
            </div>
        </div>
    </div>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="scroll.min.js"></script>
    <script src="citydata.js"></script>
    <script src="index.js"></script>
</body>

</html>

查看demo:http://kaiji.obyee.com/demo/cityList/index.html
github: https://github.com/kaijiyoung/city-scroll-list

小程序父组件利用triggerEvent调用子组件的回调函数

当子组件状态发生改变,如何通知到父组件做相应操作呢?
子组件实例可以为自己绑定一个自定义事件(可以理解为创建一个回调函数)
触发该自定义事件的方法 就是 triggerEvent
用法如下:

父组件中绑定和使用自定义事件
注意:bind 后面myevent为事件名 会区分大小写 如果触发事件this.triggerEvent(‘myevent’)使用的是 小写 绑定事件bindmyevent=”callback”也要是 小写

<tabBar bindmyevent="callback"></tabBar>

子组件中的事件

<view bindtap="eventHandler"></view>

触发自定义事件

eventHandler:function(){
      var myEventDetail = {} // detail对象,提供给事件监听函数 detail为子组件的事件对象
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
}

自定义组件selectComponent选择器使用采坑

该选择器 用于 选择 已经引入到当前wxml的 组件实例,以下面代码为例
当前wxml已经引入类名为 J_ticketInfo 的组件
则可以在 当前wxml中获取到该组件,并调用该组件里面自定义的方法 togglePopup
注意:如果当前wxml未引入该组件,选择器将返回null

self.selectComponent('.J_ticketInfo').togglePopup();

更换wordpress域名步骤

在更换域名之前 将wp项目拷贝到本地
用编辑器整站替换域名(我使用的是sublime text3 中的全局搜索替换功能 ctrl + shift + f)
再将 有改动的文件 依次更新替换到虚拟主机中

第一步:
登录域名解析网站(我使用的是阿里云解析)https://account.aliyun.com/login/login.htm
把新的域名解析到wp的主机

第二步:
进入主机管理(我使用的是阿里云虚拟主机)https://cp.aliyun.com/login
绑定新的域名到当前主机

第三步:
进入数据库管理(一定要先备份数据 以防出错)
执行以下语句 替换整站域名为新域名(包括文章、评论等等域名)

UPDATE wp_options SET option_value = replace(option_value, 'www.obyee.com','kaiji.obyee.com') ;
UPDATE wp_posts SET post_content = replace(post_content, 'www.obyee.com','kaiji.obyee.com') ;
UPDATE wp_comments SET comment_content = replace(comment_content, 'www.obyee.com', 'kaiji.obyee.com') ;
UPDATE wp_comments SET comment_author_url = replace(comment_author_url, 'www.obyee.com', 'kaiji.obyee.com') ;

参考资料:如何完美更换WordPress网站的域名