WEB笔记

iTakeo

几个小程序组件。





倒计时。

调用组件

<countdown time="5000"></countdown>
01.

其他参数说明:

参数 描述 默认值
time 倒计时的时间,可传毫秒数,日期和数组,具体参数可参考这里 0
index 索引值 0
showDay 是否显示天数 false
showHour 是否显示小时 true
showMin 是否显示分钟 true
showSec 是否显示秒数 true
bindend 结束回调

数字输入框。

调用组件

<inputnum min="10" max="9999" value="1"></inputnum>
01.

其他参数说明:

参数 描述 默认值
min 最小值 1
max 最大值 9999
value value值 1
step 累加数值 1
maxlen 最多输入位数 4
disabled 禁止使用 false
inpDisabled 输入框禁止输入 true
index 索引值 0
bindchange 改变回调

单选框和复选框

调用组件

<checklist value="1" checked="1" bindchange="changeFn">
    <text>这里是显示的文字</text>
</checklist>
01.
02.
03.

其他参数说明:

参数 描述 默认值
type 设置大小,有s,m,l三种情况 m
index 索引值 0
position 设置控件的对齐。left和right两种 left
color 设置颜色 #FA7346
align 设置文字的对齐方式。left和right两种 left
disabled 禁止使用 false
margin 设置控件距离文字的边距 0 20rpx 0 0
checked 是否选中 false
value 唯一值 0
bindchange 改变时的回调 “”

以上参数中algin,margin也可通过内容直接修改。如下:

<checklist value="1" checked="1" bindchange="changeFn">
    <view style="text-align: right;margin-left: 20px">可嵌套标签,赋值样式</view>
</checklist>
01.
02.
03.

如果需要多个使用的话,用checkgroup组件包起来,如下:

<checkgroup bindchange="changeFn2">
    <checklist value="{{item.value}}" index="{{index}}" disabled="{{item.disabled}}" checked="{{item.checked}}" wx:for="{{items}}" wx:key="{{index}}">{{item.title}}
    </checklist>
</checkgroup>   
01.
02.
03.
04.

checkgroup组件有2个属性:

参数 描述 默认值
bindchange 回调函数 “”
type radio,check check

如果需要单选框的话,请在checkgroup设置type=”radio”

弹出层组件,官方的model虽然很方便,只是样式不可修改,功能有限,所以单独做了一个,不过唯一的缺点就是不可显示带标签的字符串,因为官方目前不提供view,text等字符串的逆解析。

调用组件。

首先在app.js文件中引入dialog。

App({
    Dialog : require('./pages/dialog/dialog.js')
})
01.
02.
03.

在app.js中引入的目的是方便全局调用,你也可以单独在需要的页面中引入,如下:

var dialog= require('../dialog/dialog.js')
01.

然后我们到页面中加载组件,写入wxml任意位置。

<dialog id="dialog"></dialog>
01.

然后我们就可以使用组件了,如下:

app.Dialog('请输入用户名'); //默认
app.Dialog('请输入用户名',2000); //2秒自动关闭
app.Dialog('自定义样式',{ //全部参数如下
    time : 2000, //自动关闭时间
    maskClick : 1, //遮罩点击关闭,默认false
    mask : 1, //是否显示遮罩,默认true
    title : '我居中了', //title内容,不写不显示
    titleCenter : 1, //title居中,默认false
    style:'color:red; ', //内容追加css样式
    button :{ //自定义按钮,不写不显示
        确定(){
           //to do
        }
    },
    onClose(){
        //关闭回调函数
    }
})
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.

组件怎么使用?将组件文件放在项目中。然后再需要引入的页面.json文件里添加如下内容,如果需要修改样式,颜色请自己修改…..

{
    "usingComponents": {
        "countdown": "../countdown/index", //路径
        "checklist": "../checklist/index",
        "checkgroup": "../checkgroup/index",
        "inputnum": "../inputnum/index",
        "dialog": "../dialog/index"
    }
}
01.
02.
03.
04.
05.
06.
07.
08.
09.

下载组件

或者点击https://github.com/Takeos/wxmodule

2018年8月2日 0 / /
标签:  暂无标签

vw来做适配。

react项目使用vw,首先安装postCss插件

npm i –save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced

安装完成后打开config/webpack.config.dev.js文件,react默认隐藏webpack配置,如果没有,请执行npm run eject

将以下代码加入。

const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport');
const postcssWriteSvg = require('postcss-write-svg');
const postcssCssnext = require('postcss-cssnext');
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');
01.
02.
03.
04.
05.
06.

接着找到如下代码

{
  test: /\.css$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
          }),
          //这里加入代码
        ],
      },
    },
  ],
},
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

然后把下面的代码复制进去

postcssAspectRatioMini({}),
postcssPxToViewport({ 
    viewportWidth: 750, // (Number) The width of the viewport. 
    unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. 
    viewportUnit: 'vw', // (String) Expected units. 
    selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px. 
    minPixelValue: 1, // (Number) Set the minimum pixel value to replace. 
    mediaQuery: false // (Boolean) Allow px to be converted in media queries. 
}),
postcssWriteSvg({
    utf8: false
}),
postcssCssnext({}),
postcssViewportUnits({}),
cssnano({
    preset: "advanced", 
    autoprefixer: false, 
    "postcss-zindex": false 
})
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

最后npm start即可看到效果。

VUE项目使用vw,首先还是安装以下插件

npm i –save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced postcss-import postcss-url

安装完成后,打开根目录的.postcssrc.js配置如下内容。

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserlist" field in package.json
    "autoprefixer": {},
    "postcss-import": {}, 
    "postcss-url": {}, 
    "postcss-aspect-ratio-mini": {}, 
    "postcss-write-svg": { 
      utf8: false 
    },
    "postcss-cssnext": {}, 
    "postcss-px-to-viewport": { 
      viewportWidth: 750, // (Number) The width of the viewport. 
      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. 
      viewportUnit: 'vw', // (String) Expected units. 
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px. 
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace. 
      mediaQuery: false // (Boolean) Allow px to be converted in media queries. 
    }, 
    "postcss-viewport-units":{}, 
    "cssnano": { 
      preset: "advanced", 
      autoprefixer: false, 
      "postcss-zindex": false 
    }
  }
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

最后npm run dev即可查看效果。

如果需要某些元素不使用vw单位,可以设置配置文件中的selectorBlackList里面的类名,该属性可无限添加,随便自定义,不需要转换的单位需要写在该类名上才可生效。

以上是纯vw写法,其实配合rem来写的话,相对更简单,也不用安装那么多插件来配置。如下,设置html的font-size,后面的写法基本上同flexible写法一致了。

html{font-size: 13.3333vw;/*750设计稿, 100/7.5 */}   
div{font-size: .3rem; /*设计稿字体大小为30px的话,30/100 */ }
01.
02.
html{font-size: 10vw; /* 100/10 */}   
div{font-size: .4rem;/*设计稿字体大小为30px的话,30/75*/ }
01.
02.

上面第一种是将页面分成7.5份,这样换算rem相对简单,直接除100即可。如果你是用sublime的px to rem的话,那就无所谓第一种还是第二种了,反正插件会自己换算。

如果你不想用react和vue那些插件,也不想用rem,那么可以修改sublime的插件,打开sublime -> Preferences -> browse packgaes -> cssrem-master -> cssrem.py,把rem单位改为vw,然后在自定义配置里设置”px_to_rem”: 7.5,即可

这里有个vw例子

2018年7月31日 0 / /
标签:  暂无标签

小程序左滑删除功能。

小程序左滑删除功能。

如图所示,具体代码下载压缩包查看。或者点击https://github.com/Takeos/wxSwiperDemo



2018年7月18日 0 / /
标签:  暂无标签

小程序里如何做到微信动态全文收起功能。

小程序里如何做到微信动态全文收起功能。

如上图,当内容超过4行时,显示全文按钮,点击可查看全文,并能收起。

首先判断长度不可取,纯数字和纯中文或者中英文结合长度都是不同的。再者内容里面出现多个换行,肯定也GG了。
好像只能判断高度了,小程序是没有DOM概念的,如何获取元素判断DOM呢?
官网API,看到,小程序在1.4.0后,有了wx.createSelectorQuery(),可以获取节点,并能提供节点的基本信息。

既然有了api,我们就能在数据渲染后,获取元素,从而就可以判断高度来切换class了。

渲染数据

<view wx:for="{{jsonData}}" wx:key="{{index}}">
    <view class="msg  {{item.hidden ? 'hidden' : ''}}" data-index="{{index}}">
        <!--这里根据hidden属性,来设置class,控制多行溢出处理-->
        <text>{{item.content}}</text>
    </view>
    <!--这里根据setBtnOff属性,来设置按钮的显示,tap的时候修改对应index里面的hidden即可-->
    <view class="moreBtn4" wx:if="{{item.setBtnOff}}" data-index="{{index}}" bindtap="seaMoreFn">
        {{item.hidden ? '全文' : '收起'}}
    </view>
</view>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

处理内容

//通过ajax获取内容后,渲染到页面
ajax({
    ...
    this.setData({
        jsonData : res.data,
    });
    this.setIsMore()
    ...
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
setIsMore(){
    let newData = this.data.jsonData;
    wx.createSelectorQuery().selectAll('.msg').boundingClientRect(function(ref){
        //获取到节点后,判断高度,并添加对应属性
        ref.forEach(function(o){
            if(o.height > 82){
                newData[o.dataset.index].hidden = 1
                newData[o.dataset.index].setBtnOff = 1
            }
        });
        //重新设置data值
        this.setData({
            jsonData : newData
        });
    }).exec();
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
2018年3月12日 1 / /
标签:  暂无标签

html2canvas截图时,背景音乐重复播放问题。

当在用html2canvas截图的时候,如果当前有背景音乐自动播放,在IOS 11的版本中,会出现重复播放问题。

if(navigator.userAgent.match(/iphone/i)){  
    var verinfo = navigator.userAgent.match(/os [\d._]*/gi);  
    version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");//获取具体的系统版本号  
    if( version >= 11 ){ //版本>=11的时候
        audio.removeAttribute("autoplay");  
    }  
} 
01.
02.
03.
04.
05.
06.
07.
2018年3月5日 0 / /
标签:  暂无标签

老虎机抽奖。

快过年了,各种抽奖活动又要开始了,写了一个老虎机抽奖。

基本的css和html如下,如果复制,自己修改样式。

.game_wrap{width: 240px; height: 80px;box-sizing:  content-box; border-radius: 15px; border: 20px solid #ffcc21;overflow: hidden;margin: 10px; box-shadow: 0px 0px 15px  rgba(0,0,0,.5) inset}
.game_item{width: 33.333%;height: 80px; float: left; border-left: 5px solid #ffcc21}
.game_item:first-child{ border-left: none }
.game_item li{ list-style: none;width: 100%; height: 80px; line-height: 80px;text-align: center; position: relative; font-size: 50px; }
01.
02.
03.
04.
<div class="game_wrap">
    <div class="game_item">
        <ul></ul>
    </div>
    <div class="game_item">
        <ul></ul>
    </div>
    <div class="game_item">
        <ul></ul>
    </div>
</div>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.

调用接口

var game = new LuckGame({
    len : 5,  //奖品个数
    speed : 5000, //滚动时间
    circle : 5, //循环几圈
});
game.start([1,1,1],function(){
    //第一个参数,设置中奖信息,第二个为回调
    alert('恭喜你中奖了')
})
01.
02.
03.
04.
05.
06.
07.
08.
09.


        点击这里下载文件

        2017年12月29日 1 / /
        标签:  暂无标签

        数字滚动。

        只有简单的滚动,js采用了ES6编写,尽量使用chrome浏览器来查看,可以使用babel转成ES5,或者通过babel的网站在线转换。动画使用css3。

        以下是调用接口

        var odo1 = new Odometer('.Odometer',{
            len : null, //设置默认位数
            num : "", //初始化值
            speed : 1000, //动画速度
            symbol : '', //分割符
            dot : 0 //保留几位小数点 
        });
        odo1.update(123)  //更新数字 
        01.
        02.
        03.
        04.
        05.
        06.
        07.
        08.

        以下是基本的css

        .number-animate{line-height:45px; height: 45px;font-size: 40px;overflow: hidden; display: inline-block; position: relative; }
        .number-animate .number-animate-dot{ width: 21px; float: left; text-align: center;}
        .number-animate .number-animate-dom{ width: 27px;  text-align: center; float: left; position: relative; top: 0;}
        .number-animate .number-animate-dom span,.number-animate .number-animate-dot span{float: left;width: 100%;height: 45px;line-height: 1;}
        01.
        02.
        03.
        04.

        以下是几个基本例子。

        (更多…)

        2017年7月10日 0 / /
        标签:  暂无标签

        利用vue模仿 cNode社区。

        利用vue模仿 cNode社区。

        知识点

        vue.js //vue框架
        axios //http/ajax库
        vue-router //vue路由
        webpack //构建工具
        es6 //js es6
        babel //转es6语法 
        01.
        02.
        03.
        04.
        05.
        06.

        主要实现了首页,详情页,用户留言,用户详情页,登录暂时没做。

        https://github.com/Takeos/vue-cnode.git

        2017年7月7日 0 / /
        标签:  暂无标签

        meta缩放

        var phoneScale = parseInt(window.screen.width) / 750;
        if(/Android (\d+\.\d+)/.test(navigator.userAgent)) {
            if(parseFloat(RegExp.$1) > 2.3) {
              document.write('<meta name="viewport" id="vie" content="width=750, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
            } else {
              document.write('<meta name="viewport" id="vie" content="width=750, target-densitydpi=device-dpi">');
            }
        } else {
            document.write('<meta id="vie" name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi, minimal-ui">');
        }
        01.
        02.
        03.
        04.
        05.
        06.
        07.
        08.
        09.
        10.
        2017年4月27日 5 / /
        标签:  暂无标签

        标题固定

        #fixedContent{width:400px;margin:0 auto;box-shadow:0 0 10px rgba(0,0,0,0.75)}
        #fixedContent .titleBox{position:absolute;background:#eee;z-index:10;top:0;left:0;right:0;padding:25px;font-size:12px;border-top:1px solid #333}
        .fixedTitle{position:relative;padding-top:52px}
        .fixedBox{width: 100%;height: 500px;background: #333;}
        01.
        02.
        03.
        04.
        <div id="fixedContent">
            <div class="fixedTitle">
                <p class="titleBox">Title #1</p>
                <div class="fixedBox"></div>
            </div>
            <div class="fixedTitle">
                <p class="titleBox">Title #2</p>
                <div class="fixedBox"></div>
            </div>
            ....
        </div>
        01.
        02.
        03.
        04.
        05.
        06.
        07.
        08.
        09.
        10.
        11.
        window.onscroll = function(){
            ;[].forEach.call(document.querySelectorAll('.fixedTitle'),function(o){
                var top = o.getBoundingClientRect().top,
                    height = o.offsetHeight,
                    childTitle = o.querySelector('.titleBox'),
                    titleHeight = childTitle.offsetHeight;
                    if (top <= (height * -1) + titleHeight) 
                        childTitle.style.marginTop = (height - titleHeight)+'px';
                    else if (top <= 0) 
                        childTitle.style.marginTop= ((top * (-1)) - 1)+'px';
                    else 
                        childTitle.style.marginTop='0';
            });
        };
        01.
        02.
        03.
        04.
        05.
        06.
        07.
        08.
        09.
        10.
        11.
        12.
        13.
        14.
        2017年3月31日 2 / /
        标签:  暂无标签
        1/15
        1
         
        2
         
        3
         
        4
         
        5
         
        6
         
        7
         
        8
         
        9
         
        10
         
        回到顶部