微信小程序-组件
关注
分享
扫一扫
黄菊华老师
专注大学生计算机教育和毕业设计辅导
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
微信小程序常用组件视频课程-可滚动视图区域-scroll-view的使用
效果图wxml代码<view>bindscrolltoupper滚动到顶部/左边会触发</view><view>bindscrolltolower滚动到底部/右边会触发 </view><view>bindscroll 滚动时触发</view><view>scroll-into-view 值应为某子元素i...原创 2019-03-19 18:38:09 · 1329 阅读 · 0 评论 -
微信小程序常用组件视频课程-表单组件-picker-普通 滚动选择器 的使用
提交效果js代码 /** * 页面的初始数据 */ data: { xuhao:0, xuhao2: 1, xuhao3:0, shuzu01:['中国','美国','巴西'] }, p1:function(e){ console.log(e.detail.value) this.setData({ xuhao: e...原创 2019-03-19 18:36:01 · 1029 阅读 · 0 评论 -
微信小程序常用组件视频课程-表单组件-picker-时间 滚动选择器 的使用
点击确认输出js代码 /** * 页面的初始数据 */ data: { sj:'12:12' }, p1:function(e){ console.log(e.detail.value) this.setData({sj:e.detail.value}) }, mysubmit:function(e){ console.lo...原创 2019-03-19 18:35:55 · 917 阅读 · 0 评论 -
微信小程序常用组件视频课程-表单组件-picker-省市区3级 滚动选择器 的使用
点击省份提交表单js代码/** * 页面的初始数据 */ data: { chengshi:['浙江省','杭州市','余杭区'] }, p1:function(e){ console.log("当前的值："+ e.detail.value) console.log("当前的值：" + e.detail.value[1]) thi...原创 2019-03-19 18:10:24 · 968 阅读 · 0 评论 -
微信小程序常用组件视频课程-表单组件-radio 单选项目 的使用
wxml代码<radio value="香蕉">香蕉</radio><radio value="香蕉" checked='{{true}}'>香蕉</radio><radio value="香蕉" checked='{{false}}'>香蕉</radio><radio value="香蕉" checked='...原创 2019-03-19 18:34:55 · 849 阅读 · 0 评论 -
微信小程序常用组件视频课程-表单组件-radio-group 单项选择器 的使用
提交表单js代码 /** * 页面的初始数据 */ data: { shuzu:[ {bb:"cn",aa:"中国"}, { bb: "usa", aa: "美国",xuanzhe:"true" }, { bb: "bra", aa: "巴西" } ] }, rc:function(e){ console...原创 2019-03-19 18:34:47 · 1189 阅读 · 0 评论 -
微信小程序常用组件视频课程-表单组件-slider 滑动选择器 的使用
提交表单js代码 /** * 页面的初始数据 */ data: { }, mychange: function (e) { console.log(e.detail.value) }, mysubmit: function (e) { console.log(e.detail.value) },wxml代码<form bi...原创 2019-03-19 18:34:41 · 1010 阅读 · 0 评论 -
微信小程序常用组件视频课程-表单组件-switch 开关选择器 的使用
提交表单效果js代码 /** * 页面的初始数据 */ data: { }, mychange:function(e){ console.log(e.detail.value) }, mysubmit:function(e) { console.log(e.detail.value) console.log(e.detail....原创 2019-03-19 18:34:32 · 965 阅读 · 0 评论 -
微信小程序常用组件视频课程-表单组件-textarea 多行输入框 的使用
表单提交效果js代码 /** * 页面的初始数据 */ data: { }, myblur:function(e){ console.log(e.detail.value) }, mysubmit: function (e) { console.log(e.detail.value) console.log(e.detail....原创 2019-03-19 18:34:24 · 986 阅读 · 0 评论 -
微信小程序常用组件视频课程-媒体组件-image图片 的使用
wxml代码<!--image组件默认宽度300px、高度225px 500x300 300x180 --><view> top 不缩放图片，只显示图片的顶部区域</view><view> <image src="/tupian/fm.png" mode='top' style='width:200px; height:10...原创 2019-03-19 18:32:19 · 1044 阅读 · 0 评论 -
微信小程序常用组件视频课程-表单组件-label的使用
js代码 /** * 页面的初始数据 */ data: { }, tishi:function(e){ wx.showToast({ title: '我是提示信息！', }) },wxml代码<button id="ts" bindtap="tishi">提示信息</button><label ...原创 2019-03-19 18:36:06 · 1001 阅读 · 0 评论 -
微信小程序常用组件视频课程-表单组件-input 输入框 的使用
js代码 /** * 页面的初始数据 */ data: { }, mysubmit01:function(e){ console.log(e.detail.value) console.log(e.detail.value.t1) }, myreset01:function(e){ console.log("发生了重置事件") }...原创 2019-03-19 18:36:48 · 1053 阅读 · 0 评论 -
微信小程序常用组件视频课程-滑块视图容器-swiper的使用
效果图js代码 /** * 页面的初始数据 */ data: { a:true, vertical:false, autoplay:true, interval:3000, duration:500, ads: ['/tupian/1.jpg', '/tupian/2.jpg', '/tupian/3.jpg'] },...原创 2019-03-19 18:38:03 · 1148 阅读 · 0 评论 -
微信小程序常用组件视频课程-基础内容-icon图标的使用
wxml代码<view>有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear</view><view> <icon type='success'></icon> <icon type="success_...原创 2019-03-19 18:37:57 · 1078 阅读 · 0 评论 -
微信小程序常用组件视频课程-基础内容-text文本的使用
wxml代码01-当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家的某些地区<view> <text class='c01'>02-当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家的某些地区</text></view><view class='c02'>03-...原创 2019-03-19 18:37:51 · 986 阅读 · 0 评论 -
微信小程序常用组件视频课程-基础内容-progress 进度条的使用
wxml代码<!--percent Float 百分比0~100--><progress percent='10'></progress><progress percent='50'></progress><!-- show-info Boolean false 在进度条右侧显示百分比 --><progr...原创 2019-03-19 18:37:41 · 1202 阅读 · 0 评论 -
微信小程序常用组件视频课程-导航-navigator 页面链接的使用
wxml代码<navigator url="/pages/01jichu/text">跳转到text文本</navigator><navigator url="/pages/02biaodan/index" open-type='switchTab'>跳转tab2的菜单</navigator>wxss代码navigator{ mar...原创 2019-03-19 18:37:11 · 1047 阅读 · 0 评论 -
微信小程序常用组件视频课程-表单组件-button 按钮的使用
wxml代码<view>size 有效值：default/mini</view><button>默认按钮</button><button size='default'>按钮default</button><button size='mini'>按钮mini</button><view...原创 2019-03-19 18:37:05 · 919 阅读 · 0 评论 -
微信小程序常用组件视频课程-表单组件-checkbox 多选项目 的使用
wxml代码<view> <checkbox value='香蕉' checked>香蕉</checkbox> <checkbox value='香蕉' checked='true'>香蕉</checkbox> <checkbox value='香蕉' checked='{{true}}'>香蕉</che...原创 2019-03-19 18:37:35 · 986 阅读 · 0 评论 -
微信小程序常用组件视频课程-表单组件-checkbox-group 多项选择器 的使用
js代码 /** * 页面的初始数据 */ data: { }, mycheck:function(e){ console.log(e.detail.value) },wxml代码<checkbox-group bindchange="mycheck"> <checkbox value='香蕉'>香蕉</check...原创 2019-03-19 18:37:00 · 1326 阅读 · 0 评论 -
微信小程序常用组件视频课程-表单组件-form 表单数据如何获取 的使用
提交后js代码 /** * 页面的初始数据 */ data: { }, mysubmit:function(e){ console.log(e.detail.value) console.log(e.detail.value.ck) }, myreset:function(e){ console.log("form页面发生了重置"...原创 2019-03-19 18:36:54 · 1016 阅读 · 0 评论 -
微信小程序常用组件视频课程-视图容器-view的使用
效果图wxml代码<view> 按下去不做任何样式</view><view hover-class='myred'> 按下去做样式</view><view>flex-direction：row</view><view class='rongqi01'> <view class=...原创 2019-03-19 17:16:12 · 951 阅读 · 0 评论