1.基本语法
1.1 动态设置class类名
class="tabs_item {{item.isActive ? 'active' : ''}}">
1.2 事件函数
<view
bind:tap="onMenuTap"
mark:key="{{index}}"
data-index="{{index}}"
>
</view>
事件函数不可以直接传参。可以通过mark和自定义属性data-“名字随意”来传参
获取可通过onMenuTap(e),打印e查看数据
1.3 跳转
1.3.1标签跳转
小程序常用组件: navigator
url: 页面路径
支持相对和绝对路径路径为空时会报错
hover-class: 点击态的样式
none 禁用点击效果
open-type: 跳转方式
switchTab 跳转到 tabBar 页面
<navigator url="../signIn/signIn" hover-class="none">
<view class="item-text">xxxx</view>
</navigator>
1.3.2事件跳转
跳转非tabber页面
toWeightDetail(e: any) {
console.log("点击过衡任务卡片", e.currentTarget.dataset.id)
wx.navigateTo({
"url": "../../../pages/task/task_detail/index?id=" +e.currentTarget.dataset.id
}) }
1.3.3返回上一个页面
wx.navigateBack()
1.4表单双向绑定
1.4.1输入框
value="{{params.driverName}}"
bindinput="inputChange"
<van-field label-class="cover"
value="{{params.driverName}}"
data-key="driverName"
bindinput="inputChange"
label="姓名"
placeholder="请输入姓名"
clearable
required
border="{{ false }}" />
1.5小程序页面布局
小程序组件(标签)
view相当于div
text相当于span
样式选择器
类、标签、后代
更新页面数据
this.setData({})
1.6image组件(图片)
占位容器:image 组件是一个有默认大小(320 x240)的“盒子
缩放模式:
scaleToFill 不保证缩放比,图片拉伸填满容器
aspectFit 保证缩放比,使图片的长边显示出来
aspectFill 保证缩放比,使图片的短边显示出来
使用原则:
指定“容器”的大小,根据设计稿设置 image的宽高尺寸
图片铺满容器,设置 aspectFill 缩放模式
1.7轮播图
组件结构
swiper: 滑块容器,只能嵌套 swiper-item 组件swiper-item: 滑块单元,可以嵌套任何内容,如image组件属性
indicator-dots是否显示面板指示点
autoplay 是否自动切换
circular 是否衔接滑动
示例:
<swiper circular autoplay indicator-dots>swiper-item>
<image src="/static/uploads/slide 1.jpg' mode="/>
</swiper-item>
1.8表单组件
待更新。。。