一. tabBar

tabBartabBar其实就是微信分类栏

1.1 在全局样式这里添加tabBar

做分类栏起码要有两个页面

"tabBar": {"list": [{"pagePath": "pages/index/index",        //路径"text": "首页",                         //名字"iconPath": "icons/home.png",           //鼠标没放上去的图片"selectedIconPath": "icons/home-o.png"  //鼠标放上去后的图片},{"pagePath": "pages/my/my","text": "我的","iconPath": "icons/my.png","selectedIconPath": "icons/my-o.png"}]}

注意事项：

pages和tabBar的页面顺序要保存一致

这个启动页面是paes，tabBar的第一个，不然分类栏是不会出不来

·

这就是分类栏

二. 数据双向绑定

2.1 添加一个label的用户名

<view><label>用户名：<label>{{username}}</label></label><input class="input1" placeholder="请输入用户名" bindinput="inputStr" value="{{username}}" />
</view>

bindinput="inputStr"

2.2 在data里添加一个username，然后创建一个方法用来实现双向绑定

/**
* 页面的初始数据
*/
data: {username:"zs"
},

inputStr:function(e){//console.log(e);var name=e.detail.value;this.setData({username:name})
}

//小程序Data的赋值必须使用setData方法，错误：this.Data.title='xxx';

2.3 创建按钮点击获取文本框里的值

<view><button class="bind1" bindtap="testClike" data-age="19">点我</button>
</view>

小程序里的方法传值不能用 bindtap=“testClike(age)” 必须用data-xx="xx"

2.4 接收按钮传过来的值

testClike:function(str){console.log(str.target.dataset.age);console.log("username:"+this.data.username);
}

接收点击按钮时按钮传过来的值，然后接收文本框传过来的值

微信开发者工具的tabBar和数据双向绑定相关推荐

微信开发者工具自定义tabBar导航
1 新建小程序项目 2配置好页面组件如home user等 3在app.json中 tabbar里 custom:true 4新建custom-tab-bar/index 5 安装vant weap ...
[小程序] 微信开发者工具下载与安装 WXMLfor if 模板页面引用 tabBar
文章目录帐号设置微信开发者工具 1.工具的下载与安装 2.helloworld项目小程序目录结构及配置 1.目录结构 2.全局配置文件app.json 3.全局样式文件app.wxss 4.小程 ...
微信小程序的 websocket 以及微信开发者工具测试 ws 协议没有数据的离奇解决方案记录
微信小程序的 websocket 在本地web能够使用ws协议去链接websocket,但是小程序不能使用. 一.WSS 协议与 WS 协议二.业务场景记录 : 使用 ws 协议的 websocek ...
微信小程序体验版数据加载不了，打开调试模式下才行（在微信开发者工具上也能加载数据）
记一次微信小程序体验版数据加载不了的解决过程(请求不到数据),供大家参考: 注:域名已经备案.https已经配置.ssl证书在1.2以上版本.小程序后台已经配置服务器域名注:域名已经备案.https ...
微信开发者工具更换默认用户存储目录方法，将C盘数据User Data迁移到D盘
标题:微信开发者工具更换默认用户存储目录方法,将C盘数据User Data迁移到D盘 1.首先将C:\Users\dell\AppData\Local\微信开发者工具目录下的User Data,移动到 ...
微信开发者工具更换存储目录将C盘数据User Data迁移到D盘
1.在D盘新建文件夹路径如:D:\微信开发者工具 2.将C盘的AppData文件夹剪切到D盘打开工具默认的 userdata 的文件夹 C:\Users\****\AppData\Local\微信 ...
使用微信开发者工具创建小程序项目
个人资源与分享网站:http://xiaocaoshare.com/ 1.微信开发者工具自行到网上下载即可 2.打开微信开发者工具,如图所示: 点击创建后,如下图所示: #### 项目结构 ``` └ ...
微信小程序 ---在Vscode上编辑，微信开发者工具上预览，快速上手
微信小程序 -快速上手第一个小程序成功导入一个已经在开发中项目 vscode 设置设置高亮拷贝到 settings.json "files.associations": ...
微信小程序（微信开发者工具及工程创建、小程序配置、逻辑层、模块化）
一.阶段概述 1.课程安排课程市场:14+1 课程安排:微信小程序:5uniapp:5数据可视化:4答辩:1 2.项目展示小u商城数据可视化 3.阶段目标 1.培养学员能力独立完成小程序原生开发 ...
从零开始编写一个微信小程序（微信开发者工具+JS+WuxUI组件库+云开发）万字整理，建议收藏！
微信小程序-魔镜笔记&源码(微信开发者工具+JS+UI组件库+云开发) 效果展示视频演示经历了一次升级之后,我的小程序怎么样了? 文章目录微信小程序-魔镜笔记&源码(微信开发 ...

微信开发者工具的tabBar和数据双向绑定

一. tabBar

·

二. 数据双向绑定

微信开发者工具的tabBar和数据双向绑定相关推荐

最新文章

热门文章