code-image-backup-public/fastbee
1
0
Fork 0
mirror of https://gitee.com/beecue/fastbee.git synced 2025-12-18 08:55:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新页面显示效果

Browse Source
This commit is contained in:
qianlile
2021-09-06 11:54:30 +08:00
parent 7b673421ad
commit c708b0f16f
18 changed files with 433 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
wechat/pages/add/add.js
View File

@@ -5,7 +5,30 @@ Page({
* 页面的初始数据
*/
data: {
activeKey: 0,
elementId:0,
list:[
{
name: '4G设备', id: 0, devices: [
{ id: 0, name: "窗帘", des: '一键远程开机', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1568613757827.png" }
, { id: 1, name: "灯", des: '一键远程开机', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585738057372.png" }
, { id: 2, name: "插座", des: '一键远程开机', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585737911180.png" }
, { id: 3, name: "开关", des: '一键远程开机', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585737869517.png" }
, { id: 4, name: "灭蚊器", des: '一键远程开机', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1568972293729.png" }]
}
, {
name: 'WiFi设备', id: 1, devices: [
{ id: 0, name: "空气净化器", des: '智能，便捷', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585735911905.png" }
, { id: 1, name: "断路器", des: '智能，便捷', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1559631642708.png" }
, { id: 2, name: "电饭煲", des: '智能，便捷', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585737625713.png" }
, { id: 3, name: "冰箱", des: '智能，便捷', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585736782834.png" }
, { id: 4, name: "油烟机", des: '智能，便捷', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585737687733.png" }
, { id: 5, name: "地暖", des: '智能，便捷', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585735982904.png" }
, { id: 6, name: "净水器", des: '智能，便捷', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585735954567.png" }
]
}
],
load:true,
},
/**
@@ -14,6 +37,54 @@ Page({
onLoad: function (options) {
},
changeTab:function(e){
const { index } = e.currentTarget.dataset;
this.setData({
activeKey:index,
elementId:index
});
},
scroll:function(e){
let that = this;
let list = this.data.list;
let tabHeight = 0;
if (this.data.load) {
for (let i = 0; i < list.length; i++) {
let view = wx.createSelectorQuery().select("#main-" + list[i].id);
view.fields({
size: true
}, data => {
list[i].top = tabHeight;
tabHeight = tabHeight + data.height;
list[i].bottom = tabHeight;
}).exec();
}
that.setData({
load: false,
list: list
})
}
let scrollTop = e.detail.scrollTop - 25 ;
for (let i = 0; i < list.length; i++) {
if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
that.setData({
activeKey: list[i].id
})
return false
}
}
},
goToBindDevice(e){
if(e.currentTarget.dataset.type === 0){
this.addFourG();
}else if(e.currentTarget.dataset.type === 1){
this.addWifi();
};
},
addFourG(){
wx.navigateTo({
url: '/pages/add4G/index',

43
wechat/pages/add/add.wxml
View File

@@ -1,12 +1,12 @@
<!--miniprogram/pages/add/index.wxml-->
<view class="top">
<image src="/icons/Internet.png" />
<image src="/icons/keji.jpeg" />
</view>
<view class="title">添加设备</view>
<view class="main">
<view class="name">设备分类 >>></view>
<view class="content">
<view class="item">
<!-- <view class="title">添加设备</view> -->
<view class="content">
<view class="title">添加设备 >>></view>
<view class="main">
<!-- <view class="item">
<view class="type">
<image src="/icons/4g.png"></image>
<text>4G开关</text>
@@ -14,7 +14,7 @@
<view class="add" bindtap="addFourG">
<image src="/icons/add_1.png" />
</view>
</view>
</view> -->
<!-- <view class="item">
<view class="type">
<image src="/icons/room.png"></image>
@@ -24,7 +24,7 @@
<image src="/icons/add_1.png" />
</view>
</view> -->
<view class="item">
<!-- <view class="item">
<view class="type">
<image src="/icons/wifi1.png"></image>
<text>WiFi空气盒子</text>
@@ -32,6 +32,31 @@
<view class="add" bindtap="addWifi">
<image src="/icons/add_1.png" />
</view>
</view> -->
<view class='left'>
<view class='tabs'>
<view class='tabs_item' wx:for='{{ list }}' wx:key='index' bindtap='changeTab' data-index='{{index}}'>
<text class='{{ index===activeKey?"active":"none" }}'>{{ item.name }}</text>
</view>
</view>
</view>
<view class='right'>
<scroll-view scroll-y scroll-with-animation enhanced scroll-into-view='main-{{ elementId }}' bindscroll='scroll' >
<view class='products' id='main-{{ index }}' wx:for='{{ list }}' wx:key='index'>
<view class='title'>
{{ item.name }}
</view>
<view class='products_item' wx:for='{{ item.devices }}' wx:for-index='index1' wx:for-item='item1' wx:key='index1' bindtap='goToBindDevice' data-type="{{ item.id }}" >
<view class='icon'>
<image src='{{ item1.url }}' />
</view>
<view class='info'>
<view class='name'>{{ item1.name }}</view>
<view class='describe'>{{ item1.des }}</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</view>

123
wechat/pages/add/add.wxss
View File

@@ -8,27 +8,20 @@
height: 100%;
}
.title{
/* margin: 30rpx auto; */
padding: 30rpx 0;
width: 100%;
text-align: center;
font-size: 42rpx;
background-color: rgb(64, 130, 252);
color: #ffffff;
}
.name{
background-color: #ffffff;
background-color: #3180ca;
padding:15rpx 30rpx;
/* border-bottom: 2rpx solid #666; */
box-shadow: 0rpx 3rpx 7rpx rgb(136, 136, 136);
font-size: 32rpx;
box-shadow: 0rpx 3rpx 13rpx rgb(136, 136, 136);
font-size: 38rpx;
color: #ffffff;
}
.content{
/* .content{
padding:0 30rpx;
margin: 30rpx 0;
}
.item{
} */
/* .item{
background-color: #ffffff;
box-shadow: 3rpx 3rpx 10rpx #bfbfbf;
margin: 30rpx auto;
@@ -48,8 +41,8 @@
align-items: center;
}
.add>image{
width: 70%;
height: 70%;
width: 50%;
height: 50%;
}
.add:active{
background-color: #bfbfbf;
@@ -64,4 +57,100 @@
.type>image{
width: 100rpx;
height: 100rpx;
} */
.main{
display:flex;
margin:20rpx 0;
}
.main .left{
width:200rpx;
}
.main .left .tabs{
width:100%;
}
.main .left .tabs .tabs_item{
height:80rpx;
display:flex;
justify-content:center;
background-color:#ffffff;
align-items:center;
}
.main .left .tabs .tabs_item>text{
display:block;
width:100%;
height:40rpx;
text-align:center;
line-height:40rpx;
}
.active{
border-right:10rpx solid red;
/* background-color:rgba(0,0,0,.1); */
color:red;
}
.main.right{
width:550rpx;
}
.right scroll-view{
height:calc( 100vh - 320rpx );
width:490rpx;
margin:0 30rpx;
}
/* 去掉滚动条 */
::-webkit-scrollbar{
width:0;
height:0;
color:transparent;
}
.right .products{
width:100%;
margin-bottom:20rpx;
}
.right .products .title{
display:block;
width:100%;
height:100rpx;
line-height:100rpx;
padding:0 40rpx;
border-bottom:1rpx solid rgba(0,0,0,.1);
background-color:#ffffff;
color:red;
font-size:32rpx;
}
.right .products .products_item{
width:100%;
height:150rpx;
background-color:#ffffff;
margin-bottom:30rpx;
display:flex;
}
.right .products .products_item:active{
background-color:rgba(0,0,0,.1);
}
.right .products .products_item .icon{
width:150rpx;
height:150rpx;
display:flex;
justify-content:center;
align-items:center;
}
.right .products .products_item .icon>image{
width:80%;
height:80%;
}
.right .products .products_item .info{
flex:1;
padding:20rpx;
}
.right .products .products_item .info .name{
display:block;
height:60rpx;
line-height:60rpx;
}
.right .products .products_item .info .describe{
display:block;
height:50rpx;
line-height:50rpx;
font-size:24rpx;
color:rgba(0,0,0,.7);
}