资源

资源下载地址

 <!--引入css样式文件--><link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.css"/><!--引入zepto,因为在后续的过程中会用到jq，zepto中集成了jq--><script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js" type="text/javascript" charset="utf-8"></script>            <!--引入微信的两个js--><script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><!--weui.min.js有版本之分，在低版本的js中有些功能不完善，在高版本会支持--><script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script><!--<script src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"></script>--><!--zepto必须在自己的js代码之前引入-->

引入

在vue用的话import就行

使用picker

  <div id="showPicker" @click="checkPicker">请选择</div>

  handleWeixin(index) {let {questlist} = this.msglet item = questlist[index]let {options} = itemconsole.log(item);console.log(options);let myarray = []options.forEach((oitem, oindex) => {oitem.checked = falselet a = {label: oitem.storeName,value: oindex}myarray.push(a)})let that = thisweui.picker(myarray, {onChange: function (result) {console.log("change", result);},onConfirm: function (result) {that.city = options[result[0]].storeNameoptions[result[0]].checked = truethat.dateList = options[result[0]].date}})return},

重点是，

上面的代码都是我处理的数据，具体格式为
数组便是选择列表的内容
label便是列表条目内容

  weui.picker([{label: '飞机票',value: 0},{label: '火车票',value: 1}, {label: '的士票',value: 2},{label: '公交票 (disabled)',disabled: true,value: 3}, {label: '其他',value: 4}], {onChange: function (result) {console.log(result);},onConfirm: function (result) {console.log(result);}});

alert弹窗

weui.alert(`第${item.orderNum}题为必答题哦`)

苹果手机样式

安卓样式

微信网页之weui——微信样式控件相关推荐

微信小程序wepy自定义card控件封装
微信小程序wepy自定义card控件在利用wepy开发小程序的过程中,需要使用自定义控件来实现,但是很多时候,若直接在page页面中写对应的控件,下次在另一个页面中,想使用同样的控件又需要重新绑定数 ...
微信小程序：模仿树形控件——画三角形
微信小程序:模仿树形控件--画三角形前言一.前端样式二.css 1.底边在左的三角形 2.底边在上的三角形前言微信小程序没有像element ui这样的框架,页面需要展现一个树形结构,于是就 ...
打造Android微信朋友圈下拉刷新控件
打造Android微信朋友圈下拉刷新控件> 转载于:https://www.cnblogs.com/zhujiabin/p/5707789.html
微信网页分享(配合微信公众平台)
微信网页分享--配合微信公众平台一. 准备工作二. SpringBoot前后端不分离版本三. SpringBoot+Vue前后端分离版本源码下载地址一. 准备工作准备一个域名(微信分享出去 ...
ie浏览器提示 Internet Explorer 已经限制此网页运行脚本或Activex控件
"Internet Explorer 已经限制此网页运行脚本或Activex控件"出现的条件有以下几种: 1.本地调试html页 2.内有js (外部引用,内部引用,标签绑定等) ...
创建可在网页下载安装的ActiveX控件（通过Setup.exe安装）
为完成网页自动下载并安装控件的功能,需要通过C#创建一个ActiveX控件,然后将该控件置于安装程序中,在打开网页的时候下载.安装并注册该ActiveX控件.本文是采用VS2005创建的,VS2003 ...
怎样不显示限制网页运行可访问计算机的脚本和active控件,Internet Explorer已限制此网页运行脚本或ActiveX控件...
Internet Explorer已限制此网页运行脚本或ActiveX控件是控件安装错误造成的,解决方法为: 1.先关闭 Internet Explorer 浏览器,然后从开始菜单中找到 Intern ...
手把手实现微信网页授权和微信支付，附源代码（VUE and thinkPHP）
wechat github 手把手实现微信网页授权和微信支付,附源代码(VUE and thinkPHP) 概述公众号开发是痛苦的,痛苦在好多问题开发者文档是没有提到的,是需要你猜的. 在开发过程中 ...
Android 仿微信语音聊天音量大小显示控件
某日用微信语音功能聊天,发现当我使用语音功能时,会弹出一个窗口,窗口中间有一个控件会实时的显示我说话声音的大小(即分贝).当时觉得挺好玩,决定也仿制一个,效果如下分析控件显示效果,可判断左边是一个i ...

微信网页之weui——微信样式控件

文章目录

资源

资源下载地址

引入

使用picker

重点是，

alert弹窗

苹果手机样式

安卓样式

微信网页之weui——微信样式控件相关推荐

最新文章

热门文章