微信小程序的视图与渲染
1.组件的基本使用
<button
type="default" >
default
</button>
<button
type="primary"
size="{{primarySize}}"
loading="{{loading}}"
plain="{{plain}}"
disabled="{{disabled}}"
bindtap="primary"
>
primary
</button>
效果
详细组件文档:https://developers.weixin.qq.com/miniprogram/dev/component/button.html
2.数据绑定
设置data数据
绑定text标签
现在我们通过一个按钮再写一个简单的小事例来动态改变数据
这是我的文件目录
接下来我们再index.wxml中插入一个按钮并绑定事件
<button
type="primary"
bindtap="changename"
>
现在我们去index.js中写入这个事件
changename:function(){
console.log(this.data.myname)
var newname = 'dahlin'
this.setData({ myname: newname})
}
效果
标签中的渲染判断处理,微信小程序的试图容器都支持if的真假判断
<view wx:if="{{true}}">{{myname}}</view>
把花括号的true改成false时
这里我们用也用简单的按钮来做一个显示隐藏的小事例(点击时隐藏再点击又出现)
1.设置参数show
2.设置点击按钮并绑定事件
置入按钮
<button
type="warn"
bindtap='changestate'
>状态{{show}}</button>
编写changestate方法
changestate:function(){
this.setData({show:!this.data.show})
}
3.渲染标签
在微信小程序中的渲染标签有
这里我们使用一下swiper滑块做一个轮播案例
将这段代码置入顶部
<swiper
indicator-dots="{{true}}"
autoplay="{{true}}"
interval="{{5000}}"
duration="{{500}}"
>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150" />
</swiper-item>
</block>
</swiper>
swiper的属性参数说明
indicator-dots | boolean | false | 否 | 是否显示面板指示点 | 1.00 |
indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 | 1.1.0 |
indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 | 1.1.0 |
autoplay | boolean | false | 否 | 是否自动切换 | 1.0.0 |
current | number | 0 | 否 | 当前所在滑块的 index | 1.0.0 |
interval | number | 5000 | 否 | 自动切换时间间隔 | 1.0.0 |
duration | number | 500 | 否 | 滑动动画时长 | 1.0.0 |
circular | boolean | false | 否 | 是否采用衔接滑动 | 1.0.0 |
vertical | boolean | false | 否 | 滑动方向是否为纵向 | 1.0.0 |
previous-margin | string | "0px" | 否 | 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 | 1.9.0 |
next-margin | string | "0px" | 否 | 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 | 1.9.0 |
display-multiple-items | number | 1 | 否 | 同时显示的滑块数量 | 1.9.0 |
skip-hidden-item-layout | boolean | false | 否 | 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 | 1.9.0 |
easing-function | string | "default" | 否 | 指定 swiper 切换缓动动画类型 | 2.6.5 |
bindchange | eventhandle | 否 | current 改变时会触发 change 事件,event.detail = {current, source} | 1.0.0 | |
bindtransition | eventhandle | 否 | swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy} | 2.4.3 | |
bindanimationfinish | eventhandle | 否 | 动画结束时会触发 animationfinish 事件,event.detail 同上 | 1.9.0 |
js设置滑块图片路径源
效果
4.模板的使用
微信小程序的视图与渲染的更多相关文章
- 微信小程序_(视图)简单的scroll-view容器
scroll-view容器效果 官方文档:传送门 scroll-view 可滚动视图区域 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许 ...
- 微信小程序开发系列二:微信小程序的视图设计
大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...
- 微信小程序_(视图)简单的swiper容器
swiper容器效果 官方文档:传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 ...
- 微信小程序之视图容器(swiper)组件创建轮播图
一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...
- 微信小程序-滑动视图注意事项
真的得吐槽下微信的开发文档,一点点都不详细的好吗. <!--垂直滚动,这里必须设置高度--> <scroll-view scroll-y="true" style ...
- 微信小程序 --- if/else条件渲染
if 条件渲染:当为真的时候显示,当为假的时候隐藏: else 条件渲染:当为真的时候隐藏,当为假的时候显示: <view wx:if="{{true}}">{{tex ...
- 微信小程序-组件-视图容器
1.view 1.作用:类似 html 的 div 用来进行页面布局,具有块级盒子特性. 2.常用属性:设置view盒子点击后的状态,以及控制是否影响父盒子的点击状态 3.eg:<view ho ...
- 微信小程序,前端大梦想(二)
微信小程序的视图与渲染 今天我们从四个方面来了解小程序: •组件的基本使用 •数据绑定 •渲染标签 •模板的使用 一.组件的基本使用: 微信小程序为我们的开发提供了丰富的UI组件 ...
- 微信小程序笔记<七>视图层 —— wxml
微信小程序的视图层由 *.wxml 组成,wxml与html一样属于标签语言,但wxml与html的标签截然不一样. xwml特性 一.数据绑定 <!--wxml--> <view& ...
随机推荐
- vue-cli初始化项目
vue init webpack cnpm install npm run dev 初始化项目 我们用vue init命令来初始化项目,具体看一下这条命令的使用方法. vue init <t ...
- cocopods新建或者更新远端库主要操作步骤
1.搭建远程仓库(私有或者公有项目): 2.使用sourceTree拉去远程仓库: 3.打开拉去的项目仓库Finder,构建pod lib项目:pod lib create AFNetworking( ...
- Java中session与application的异同
客户端的session 其实是标记了你的请求来自哪个浏览器 问题1:永远都一样吗? 答:重启了浏览器,你的session id就改变了, 结果会导致,再无法取回原来在服务端保存的数据. 问题2:假设客 ...
- python3 连接数据库注意点
类库:pymysql ''' Created on 2019年 @author: Root ''' import pymysql from name import getName # 数据库连接信息 ...
- C#如何加载程序运行目录外的程序集 (转)
---恢复内容开始--- 尼玛,为了这个问题,纠结到差点吐出干血,赶紧记下来! 源地址:http://blog.csdn.net/dyllove98/article/details/9391325 我 ...
- 常见Code Review过程中发现的问题
软件环境:Spring MVC + MyBatis 主要体现在两个方面,一个是编码习惯问题,另一个是编码质量的问题.编码习惯主要有日志编写.代码注释以及编码风格的问题,而编码质量则与很多方面相关,比如 ...
- 提升布局性能____Re-using Layouts with <include/>
可以再一个布局中通过"include"和"merge"元素进行复用其他的布局元素. 比如如下一个布局: <FrameLayout xmlns:androi ...
- 20131228-sql命令
开始 --cmd net start mssqlservernetnet stop mssqlserver
- ambari-cassandra-service
社区:https://github.com/Symantec/ambari-cassandra-service 在HDP集群上安装和管理Cassandra服务,Apache Cassandra是一个开 ...
- VUE动态(自动)Loading【绑定到URL】,同页面多个Loading互不冲突
需求来源:当使用React时,使用 umi loading 很方便,页面对http请求发生改变时,也会自动改变loading的相关状态(true/false) 对VUE插件进行找寻,发现没找到合适内容 ...