一、准备
注册账号
账号类型以及认证都关系到很多使用权限配置后台服务器
需要合法的域名，并且在绑定时还需要验证，其他链接都需要分别配置域名API
阅读官方的文档基本就可以满足工具
下载官方开发工具
二、创建简单的项目
2.1 项目设计及结构
- 官方文档有简易教程、框架、组件、API等，开发前建议都浏览一遍
开发链接 - 官方还制定了设计要求
设计链接
至于介绍、运营、数据等官方都有介绍
2.2 一个带有自动滚动的标签导航示例
- 当用户点击到边缘的标签时，滑动导航条会自动滚动适当的距离
-
手指滑动下方的tab ，同样会和导航同步
项目结构以及app.json配置
部分源码：
lights.js
//获取应用实例
// var app = getApp();
Page({
data: {
scrollLeft: 0, //tab标题的滚动条位置
winWidth: 0, //窗口宽度
winHeight: 0, //窗口高度
currentTab: 0, //// 当前tab
oldCurrentTab: 0, //// tab 旧值
tabItemWidth:0, //tab 子元素宽度
switchStatus: [false, false, true, false, false],
rooms:[{
id:0,
name:"客房"
}, {
id:1,
name: "卧室",
switches: [{ id: 1, name: "灯1" }, { id: 2, name: "灯2" }, { id: 3, name: "灯3" }]
}, {
id:2,
name: "卫生间"
}, {
id:3,
name: "客厅1"
}, {
id:4,
name: "客厅2"
}, {
id:5,
name: "客厅3"
}]
},
onLoad: function () {
var that = this;
//tab 子元素一屏的个数
var tabItemCount = 3;
/**
* 获取系统信息
*/
wx.getSystemInfo({
success: function (res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight,
tabItemWidth: res.windowWidth / tabItemCount //计算tab子元素宽度
});
}
});
},
/**
* 页面隐藏
*/
onHide: function () {
this.setData({
switchStatus: [false, false, false, false, false]
});
},
/**
* 滑动切换tab
* current改变触发change
*/
bindChange: function (e) {
// var that = this;
this.setData({
currentTab: e.detail.current
});
//根据新值计算增量
var increase = this.data.currentTab - this.data.oldCurrentTab;
//重置旧值
this.setData({
oldCurrentTab: this.data.currentTab
});
//检查是否需要滚动
this.checkCor(increase);
},
/**
* 点击tab切换
*/
swichNav: function (e) {
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
this.setData({
currentTab: e.target.dataset.current
})
}
},
//判断当前滚动超过一屏时，设置tab标题滚动条。
checkCor: function (increase) {
var marginal = 1; //需要滚动的边缘临界值
if (this.data.currentTab > marginal) {
//只判断大于0，会导致点击手动滑动切换tab时老旧值相等，增量为0，从而误判
var scrollValue = increase > 0 ? (this.data.scrollLeft + this.data.tabItemWidth) : (this.data.scrollLeft - this.data.tabItemWidth);
this.setData({
scrollLeft: scrollValue
})
} else {
this.setData({
scrollLeft: 0
})
}
},
/**
* 点击tab切换
*/
switchChange: function (e) {
// console.log(e.detail.value);
// console.log(e.target.dataset.id);
// console.log(e);
// this.data.switchStatus[e.target.dataset.id] = e.detail.value
//在setData中，"switchStatus[1]"=e.detail.value ,可以设置数组的某项值，但是index不能动态，也就是不可以传参数，唯一的方法就是在外面拼接好所需要的字符串（在setData下拼接同样会报错）
var statusAddr = "switchStatus[" + e.target.dataset.id+"]"
this.setData({
[statusAddr]: e.detail.value
});
}
})
lights.wxml
{{room.name}}
{{switch.name}}
{{room.name}}
lights.wxss
/* lights.wxss */
.swiper-tab{
width: 100%;
border-bottom: 2rpx solid #777777;
text-align: center;
line-height: 80rpx;
overflow: hidden;
display: inline-block;
/*不换行*/
white-space: nowrap;
}
.swiper-tab-list{
/* width: 80pt; */
font-size: 30rpx;
display: inline-block;
color: #777777;
}
.on{
color: #da7c0c;
border-bottom: 5rpx solid #da7c0c;}
.swiper-box{
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
.swiper-box view{
text-align: center;
}
/*switch */
.switch-list-item {
margin: 20rpx 20rpx;
background-color: #F8F8F8;
border-radius: 5rpx;
overflow: hidden;
height: 120rpx;
align-items: center;
display: flex;
}
.switch-list-text{
flex: 1;
}
.switch-list-switch {
flex: 1;
}