微信小程序的视图与渲染

1.组件的基本使用 <button type="default" > default </button> <button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="pri…

scroll-view容器效果官方文档:传送门 scroll-view 可滚动视图区域 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件 lower-threshold Number 50 距底部/右边多远时(单位px),触发 scrolltolower 事件 scroll-top Number 设置竖…

微信小程序开发系列二：微信小程序的视图设计

大家如果跟着我第一篇文章微信小程序开发系列一:微信小程序的申请和开发环境的搭建一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列接下来的文章我们就来研究使用微信开发者工具自动生成的这个小程序的实现文件.本文以小程序的视图设计为主,就是下图所示pages/index目录里的index.wxml文件. 我的日常工作是用一个叫做UI5的前端框架做前端开发,刚好这个框架也支持创建xml格式的视图(UI), 和微信小程序的wxml非常…

微信小程序_(视图)简单的swiper容器

swiper容器效果官方文档:传送门 swiper容器可实现简单的轮播图效果结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函…

微信小程序之视图容器（swiper）组件创建轮播图

一.视图容器(Swiper) 1.swiper:滑块视图容器微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html 二.swiper应用 1.页面逻辑(index.js) Page({ data: { imgUrls: [ { link: '/pages/index/index', url: '/images/001.jpg' }, { link: '/pages/list/list', url…

微信小程序-滑动视图注意事项

真的得吐槽下微信的开发文档,一点点都不详细的好吗.  <scroll-view scroll-y="true" style="height: 200px"> <view style="background: red; width: 100px; height: 100px" ></view> <view style="background: g…

微信小程序 --- if/else条件渲染

if 条件渲染:当为真的时候显示,当为假的时候隐藏: else 条件渲染:当为真的时候隐藏,当为假的时候显示: <view wx:if="{{true}}">{{text}}</view> <view wx:else="{{false}}">{{text}}</view> 可以这样玩: <button bindtap="btnclick">{{text}}</button>…

微信小程序-组件-视图容器

1.view 1.作用:类似 html 的 div 用来进行页面布局,具有块级盒子特性. 2.常用属性:设置view盒子点击后的状态,以及控制是否影响父盒子的点击状态 3.eg:<view hover-class="类名" hover-start-time=50> view </view> 2.scroll-view 1.作用:可滚动视图区域.每一个盒子都有自己的滚动条,可以自定义下拉刷新.上拉加载,每个视图区域互不影响. ·2.常用属性: 1.开启滚动条:…

微信小程序,前端大梦想(二)

微信小程序的视图与渲染今天我们从四个方面来了解小程序: •组件的基本使用 •数据绑定 •渲染标签 •模板的使用一.组件的基本使用: 微信小程序为我们的开发提供了丰富的UI组件,按类别可分为视图容器.基础内容.表单组件.导航.媒体组件.地图.画布.客服会话,后期课程中用到相关组件再详细介绍. 视图容器中最关键的就是view组件,学过html的同学可以把view组件简单理解成div区块标签来使用. 基础内容中常用的组件是text组件,可以简单理解为span标签. 表单…

微信小程序笔记<七>视图层 —— wxml

微信小程序的视图层由 *.wxml 组成,wxml与html一样属于标签语言,但wxml与html的标签截然不一样. xwml特性一.数据绑定  <view> {{message}} </view> // page.js Page({ data: { message: 'Hello MINA!' } }) 注意:标签属性中关键字需要在双引号内  <text>选择</te…