
以下是代码的简单实例,有需要可以自己研究使用,其实蛮简单的:
/* dialog */ document.querySelector('#alertBtn').addEventListener('click', function () { _weui2.default.alert('自定义标题的alert', function () { console.log('ok'); }, { title: '自定义标题' }); }); /* confirm */ document.querySelector('#confirmBtn').addEventListener('click', function () { _weui2.default.confirm('自定义标题的confirm', function () { console.log('yes'); }, function () { console.log('no'); }, { title: '自定义标题' }); }); /* toast */ document.querySelector('#toastBtn').addEventListener('click', function () { _weui2.default.toast('操作成功', { duration: 3000, className: "bears" }); }); /* loading */ document.querySelector('#loadingBtn').addEventListener('click', function () { var loading = _weui2.default.loading('loading'); setTimeout(function () { loading.hide(); }, 3000); }); /* actionSheet */ document.querySelector('#actionSheetBtn').addEventListener('click', function () { _weui2.default.actionSheet([{ label: '拍照', onClick: function onClick() { console.log('拍照'); } }, { label: '从相册选择', onClick: function onClick() { console.log('从相册选择'); } }, { label: '其他', onClick: function onClick() { console.log('其他'); } }], [{ label: '取消', onClick: function onClick() { console.log('取消'); } }], { className: "custom-classname" }); }); /* topTips */ document.querySelector('#topTipsBtn').addEventListener('click', function () { _weui2.default.topTips('请填写正确的字段', { duration: 3000, className: "custom-classname", callback: function callback() { console.log('close'); } }); }); /* picker */ // 普通选择器 document.querySelector('#pickerBtn').addEventListener('click', function () { _weui2.default.picker([{ label: '飞机票', value: 0 }, { label: '火车票(disabled)', disabled: true, value: 1 }, { label: '的士票(disabled)', disabled: true, value: 2 }, { label: '住宿费', value: 3 }, { label: '礼品费', value: 11 }, { label: '活动费', value: 5 }, { label: '通讯费', value: 6 }, { label: '补助', value: 7 }, { label: '通讯费', value: 8 }, { label: '其他', value: 9 }], { defaultValue: [11], className: 'custom-classname', onChange: function onChange(result) { //console.log(item, index); console.log(result); }, onConfirm: function onConfirm(result) { console.log(result); }, id: 'picker' }); }); // 时间选择器 document.querySelector('#datePickerBtn').addEventListener('click', function () { _weui2.default.datePicker({ start: '2016-12-29', end: '2030-12-29', /** * https://zh.wikipedia.org/wiki/Cron * cron 表达式后三位 * 示例: * * * * 每天 * 5 * * 每个月的5日 * 1-10 * * 每个月的前10日 * 1,5,10 * * 每个月的1号、5号、10号 * *\/2 * * 每个月的 1、3、5、7...日,注意写的时候斜杠“/”前面没有反斜杠“\”,这是因为是注释所以需要转义 * * 2 0 2月的每个周日 * * * 0,6 每个周末 * * * 3 每周三 */ cron: '* */2 0', defaultValue: [2017, 7, 9], onChange: function onChange(result) { console.log(result); }, onConfirm: function onConfirm(result) { console.log(result); }, id: 'datePicker' }); }); // 多列选择器 document.querySelector('#multiPickerBtn').addEventListener('click', function () { _weui2.default.picker([{ label: '1', value: '1' }, { label: '2', value: '2' }, { label: '3', value: '3' }], [{ label: 'A', value: 'A' }, { label: 'B', value: 'B' }, { label: 'C', value: 'C' }], { defaultValue: ['3', 'A'], onChange: function onChange(result) { console.log(result); }, onConfirm: function onConfirm(result) { console.log(result); }, id: 'multiPickerBtn' }); }); // 级联选择器 document.querySelector('#cascadePickerBtn').addEventListener('click', function () { _weui2.default.picker([{ label: '广东', value: 0, children: [{ label: '广州', value: 0, children: [{ label: '海珠', value: 0 }, { label: '番禺', value: 1 }] }, { label: '佛山', value: 1, children: [{ label: '禅城', value: 0 }, { label: '南海', value: 1 }] }] }, { label: '广西', value: 1, children: [{ label: '南宁', value: 0, children: [{ label: '青秀', value: 0 }, { label: '兴宁', value: 1 }] }, { label: '桂林', value: 1, children: [{ label: '象山', value: 0 }, { label: '秀峰', value: 1 }] }] }], { depth: 3, defaultValue: [0, 1, 1], onChange: function onChange(result) { console.log(result); }, onConfirm: function onConfirm(result) { console.log(result); }, id: 'cascadePicker' }); }); /* searchbar */ _weui2.default.searchBar('#searchBar'); /* slider 因为需要获取长度,所以必须要在slider显示的时候才调用weui.slider*/ var isSetSlider = false; function setSlider() { if (isSetSlider) return; isSetSlider = true; // 普通slider var sliderValue = document.getElementById("sliderValue"); _weui2.default.slider('#slider', { defaultValue: 50, onChange: function onChange(percent) { sliderValue.innerHTML = Math.round(percent); console.log(percent); } }); // 带step的slider var sliderStepValue = document.getElementById("sliderStepValue"); _weui2.default.slider('#sliderStep', { step: 10, defaultValue: 40, onChange: function onChange(percent) { sliderStepValue.innerHTML = Math.round(percent); console.log(percent); } }); // 分块的slider var sliderBlockValue = document.getElementById("sliderBlockValue"); _weui2.default.slider('#sliderBlock', { step: 100 / 3, defaultValue: 33.333, onChange: function onChange(percent) { sliderBlockValue.innerHTML = Math.round(percent); console.log(percent); } }); } /* tab */ _weui2.default.tab('#tab', { defaultIndex: 0, onChange: function onChange(index) { console.log(index); if (index == 3) { setSlider(); // 设置slider } } }); /* form */ // 约定正则 var regexp = { regexp: { IDNUM: /(?:^\d{15}$)|(?:^\d{18}$)|^\d{17}[\dXx]$/, VCODE: /^.{4}$/ } }; // 失去焦点时检测 _weui2.default.form.checkIfBlur('#form', regexp); // 表单提交 document.querySelector('#formSubmitBtn').addEventListener('click', function () { _weui2.default.form.validate('#form', function (error) { console.log(error); if (!error) { var loading = _weui2.default.loading('提交中...'); setTimeout(function () { loading.hide(); _weui2.default.toast('提交成功', 3000); }, 1500); } }, regexp); }); /* 图片自动上传 */ var uploadCount = 0, uploadList = []; var uploadCountDom = document.getElementById("uploadCount"); _weui2.default.uploader('#uploader', { url: 'http://' + location.hostname + ':8002/upload', auto: true, type: 'file', fileVal: 'fileVal', compress: { width: 1600, height: 1600, quality: .8 }, onBeforeQueued: function onBeforeQueued(files) { if (["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0) { _weui2.default.alert('请上传图片'); return false; } if (this.size > 10 * 1024 * 1024) { _weui2.default.alert('请上传不超过10M的图片'); return false; } if (files.length > 5) { // 防止一下子选中过多文件 _weui2.default.alert('最多只能上传5张图片,请重新选择'); return false; } if (uploadCount + 1 > 5) { _weui2.default.alert('最多只能上传5张图片'); return false; } ++uploadCount; uploadCountDom.innerHTML = uploadCount; }, onQueued: function onQueued() { uploadList.push(this); console.log(this); }, onBeforeSend: function onBeforeSend(data, headers) { console.log(this, data, headers); // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数 // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部 // return false; // 阻止文件上传 }, onProgress: function onProgress(procent) { console.log(this, procent); }, onSuccess: function onSuccess(ret) { console.log(this, ret); }, onError: function onError(err) { console.log(this, err); } }); // 缩略图预览 document.querySelector('#uploaderFiles').addEventListener('click', function (e) { var target = e.target; while (!target.classList.contains('weui-uploader__file') && target) { target = target.parentNode; } if (!target) return; var url = target.getAttribute('style') || ''; var id = target.getAttribute('data-id'); if (url) { url = url.match(/url\((.*?)\)/)[1].replace(/"/g, ''); } var gallery = _weui2.default.gallery(url, { className: 'custom-name', onDelete: function onDelete() { _weui2.default.confirm('确定删除该图片?', function () { --uploadCount; uploadCountDom.innerHTML = uploadCount; for (var i = 0, len = uploadList.length; i < len; ++i) { var file = uploadList[i]; if (file.id == id) { file.stop(); break; } } target.remove(); gallery.hide(); }); } }); }); /* 图片手动上传 */ var uploadCustomFileList = []; // 这里是简单的调用,其余api请参考文档 _weui2.default.uploader('#uploaderCustom', { url: 'http://localhost:8002/upload', auto: false, onQueued: function onQueued() { uploadCustomFileList.push(this); } }); // 手动上传按钮 document.getElementById("uploaderCustomBtn").addEventListener('click', function () { uploadCustomFileList.forEach(function (file) { file.upload(); }); }); // 缩略图预览 document.querySelector('#uploaderCustomFiles').addEventListener('click', function (e) { var target = e.target; while (!target.classList.contains('weui-uploader__file') && target) { target = target.parentNode; } if (!target) return; var url = target.getAttribute('style') || ''; var id = target.getAttribute('data-id'); if (url) { url = url.match(/url\((.*?)\)/)[1].replace(/"/g, ''); } var gallery = _weui2.default.gallery(url, { onDelete: function onDelete() { _weui2.default.confirm('确定删除该图片?', function () { var index; for (var i = 0, len = uploadCustomFileList.length; i < len; ++i) { var file = uploadCustomFileList[i]; if (file.id == id) { index = i; break; } } if (index) uploadCustomFileList.splice(index, 1); target.remove(); gallery.hide(); }); } }); });

我的微信:graent_hu
欢迎扫码加我的微信好友,有什么问题我们可以一起探讨,有什么需要也随时欢迎发消息给我~
转载请注明出处:
本文标题:转:WEUI控件JS用法简述
本文链接:https://www.wlyc.cn/post-180.html
发表评论