微信小程序之----组件
1.view
把文档分割为独立的、不同的部分。
view组件类似于html中的div标签,默认为块级元素,独占一行,可以通过设置display:inline-block改为行级元素。
- view.wxml代码如下:
<view class="outerView">
<view class="innerView1"></view>
<view class="innerView2"></view>
<view class="innerView3"></view>
<view>
- view.wxss代码如下
.outerView{
width:100%;height: 100px;margin: 0 auto;background-color: brown;
}
.innerView1{
width: 40%;height: 40px;background: blue;display: inline-block;
}
.innerView2{
width: 40%;height: 40px;background: yellow;display: inline-block;
}
.innerView3{
width: 40%;height: 40px;background: peru;
}
- 显示效果:
2.scroll-view
可滚动(点击滑动)视图区域。
- 官方给出的属性列:
- scroll-view.wxml代码如下:
<view class="section">
<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper"
bindscrolltolower="lower" bindscroll="scroll" lower-threshold="50" scroll-into-view="{{toView}}"
scroll-top="1000px">
<view id="green" class="scroll-view-item bc_green" style="width:100px;height:100px;background:red"></view>
<view id="red" class="scroll-view-item bc_red" style="width:100px;height:100px;background:blue"></view>
<view id="yellow" class="scroll-view-item bc_yellow" style="width:100px;height:100px;background:yellow"></view>
</scroll-view>
</view>
<view class="section section_gap">
<scroll-view class="scroll-view_H" scroll-x="true" style=" white-space: nowrap" >
<view id="green" style="width:400px;height:100px;background:red;display: inline-block"></view>
<view id="red" style="width:400px;height:100px;background:blue;display: inline-block"></view>
</scroll-view>
</view>
- scroll-view.js代码如下:
Page({
data: {
toView: "red",//设置初始滑动区顶部显示的view,可通过this.setdata({toView:"blue"})来改变
scrollTop: 10,
threshold:0
},
upper: function(e) {
console.log("到达顶部")
},
lower: function(e) {
console.log("到达底部")
},
scroll: function(e) {
console.log("一次滑动结束")
}
})
- 运行效果:
3.swiper
滑动面板,定时滑动切换图片或手动滑动切换图片。
- swiper.wxml
<!--indicator-dots是否显示圆点,autoplay自动播放,current初始显示的item(0代表第一个item), duration滑动速度, bindchange监听滚动和点击事件,interval滑动间隔时间-->
<swiper indicator-dots="true" autoplay="true" current="1" duration="1000" bindchange="listenSwiper" interval="2000">
<!--swiper-item只能包含一个节点再多会自动删除--> <swiper-item>
<view style="height: 150px"><image src="../../pic/pic2.png" style="width:100%;height:100%"/></view>
</swiper-item>
<swiper-item>
<view style="height: 150px"><image src="../../pic/pic1.png" style="width:100%;height:100%;"/>
</view>
</swiper-item>
<swiper-item>
<view style="height: 150px"><image src="../../pic/pic3.png" style="width:100%;height:100%;"/>
</view>
</swiper-item>
</swiper>
- 运行效果:
4.icon,text,progress,checkbox,input,readio-group,slider,switch
<!-- type=[ 'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
'info_circle', 'cancel', 'search', 'clear'] -->
<icon type="success" size="23" color="red"/>
<view><text>可以长按选中</text></view>
<!-- percent:百分比,active:是否显示从左往右的动画(但是经过测试无论设置为true还是false动画都会显示,去掉该属性则不显示动画),showInfo:是否显示百分比,strokeWidth:进度条宽度 -->
<progress percent="100" active="false" showInfo="true" strokeWidth="7" />
<!-- type:[primary, default, warn],size:[default,mini],loading:按钮前是否带loading图标,plain:按钮是否镂空,disabled:是否生效,formType:[submit,reset],hover-class:按下时的样式类名 -->
<button type="warn" size="mini" loading="true" plain="true" disabled="true" bindtap="default" formType="reset" hover-class="none"> default </button>
<!-- disabled:不可选中,value:当value改变时触发bindchange绑定的函数 -->
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for-items="{{[1,2,3,4,5]}}">
<checkbox value="{{item}}" checked='false' disabled="true"/>{{item}}
</label>
</checkbox-group> <input placeholder="禁用了的input" value="禁用了的input" type="text" auto-focus/> <radio-group bindchange="test">
<label class="radio" wx:for-items="{{[1,2,3,4]}}">
<radio value="{{item}}" checked="true"/>{{item}}
</label>
</radio-group> <!-- disabled:禁用无法滑动,step:步长如果设置为2则显示value为50 52 54...
show-value:是否显示当前值
-->
<slider bindchange="test" min="50" max="200" show-value step="2"/> <!-- type:[checkbox,switch]两种样式,disabled,checked -->
<switch checked="true" bindchange="test" type="checkbox"/>
<switch checked="true" bindchange="test" type="switch"/>
微信小程序之----组件的更多相关文章
- 微信小程序image组件binderror使用例子(对应html、js中的onerror)
官方文档 binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...
- 微信小程序倒计时组件开发
今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...
- 微信小程序input组件抖动及textarea组件光标错位解决方案
问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...
- 5个最优秀的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...
- 微信小程序弹窗组件
概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...
- Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...
- 微信小程序UI组件库 iView Weapp快速上手
概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上 ...
- 6个最优秀的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面6款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...
随机推荐
- acm课程练习2--1005
题目描述 Mr. West bought a new car! So he is travelling around the city.One day he comes to a vertical c ...
- CodeForces 687A NP-Hard Problem(二分图判定)
这本来一个挺简单的题呢,结果让我给想复杂了,二分图就是把图分成了两部分,然后不同颜色各一边,肯定是满足题目中说的边和点的条件的,真是犯二了.. 代码如下: #include<iostream&g ...
- 河南多校大一训练赛 D
题目链接:http://acm.hust.edu.cn/vjudge/contest/125004#problem/D 密码:acm Description If an integer is not ...
- PHP开源CRM-推荐几个
http://www.xinyou88.com/about/xcrm.html 因为医院要同步用户到诊统计的信息.是拿着表单来回送.途中大概有20分钟左右.有些机器和互联网可以搞定的事情.人力来做.在 ...
- ORACLE中CHAR、VARCHAR、NVARCHAR
1. char 固定长度,最长n个字符. 2. varchar 最大长度为n的可变字符串. (n为某一整数,不同数据库,最大长度n不同) char和varchar区别: ...
- CentOS6.5 添加epel源
0.安装yum优先级插件 yum install yum-priorities 1.epel简介: https://fedoraproject.org/wiki/EPEL/zh-cn rpm -Uvh ...
- Blocks(闭包)
转自:http://my.oschina.net/joanfen/blog/317644?fromerr=ATWzC3Y2 Block 与传统代码相比较更加轻量,调用简洁方便,而且可以返回多个参数,使 ...
- C/C++ strtok函数
一.头文件:#include <string.h> 二.函数原型:char * strtok (char *str, const char * delimiters); 三.参数:str, ...
- openwrt系统之字符设备驱动软件包加载、测试程序加载
.首先将软件包(如mydrv)放到ubuntu虚拟机openwrt/trunk/package/kernel/目录下 .回到openwrt/trunk/目录下,make menuconfig进行配置, ...
- 创建mysql数据库的时候指定编码
CREATE DATABASE xxx DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;