<!-- 自定义的导航栏 -->
<!-- 这是自定义组件的内部WXML结构 -->
<view class="topbar">
<view class="top-name">{{topName}}</view>
<view class="top-address">{{topAddress}}</view>
</view>
<view class="tab-box" >
<van-sticky>
<van-tabs active="{{ active }}" bind:change="ChangeTab" bind:before-change="onBeforeChange"
use-before-change="{{ true }}">
<van-tab
wx:for="{{marketList}}"
title="{{item.name}}{{item.code}}"
wx:key="index"
wx:for-index="index"
class="tab"
id="tab{{index}}"
></van-tab>
</van-tabs>
</van-sticky>
</view>
<scroll-view
id="scroller"
class="scroller"
scroll-y
scroll-with-animation="true"
scroll-into-view="{{ intoindex }}"
bindscroll="handelScroll"
>
<view class="contact-main">
<view class="contact-box"
wx:for="{{marketList}}"
wx:for-item="item"
wx:key="index"
data-bean="{{item}}"
id="intoindex{{index}}"
>
<view class="contact-name" id="selected{{index}}" >{{item.name}}{{item.code}}</view>
<!-- <view class="contact-view">-->
<!-- <view class="contact-item" wx:for="{{item.stalls}}" wx:for-item="each" wx:key="index" data-bean="{{each}}" bindtap="goDetail">-->
<!-- <view class="item-code">{{each.stallNumber}}</view>-->
<!-- <view class="item-name">{{each.contactName}}</view>-->
<!-- <view class="item-more">-->
<!-- <van-tag plain round type="primary" color="#FE6526" -->
<!-- style="margin:0px 2px"-->
<!-- wx:for="{{each.salesList}}"-->
<!-- wx:key="index"-->
<!-- >{{item}}</van-tag>-->
<!-- </view>-->
<!-- </view>-->
<!-- -->
<!-- <view wx:if="{{ item.stalls.length==0 }}" class="none-text">待入驻...</view>-->
<!-- </view>-->
<van-grid column-num="3" border="{{ false }}" gutter="{{8}}">
<van-grid-item use-slot wx:for="{{ item.stalls }}" wx:for-item="each" wx:key="index"
data-bean="{{each}}" bindtap="goDetail"
content-class="grid-item_content" custom-class="grid-item_root">
<view class="item-code">{{each.stallNumber}}</view>
<view class="item-name">{{each.contactName}}</view>
<view class="item-more">
<van-tag plain round type="primary" color="#FE6526"
style="margin:0px 2px"
wx:for="{{each.salesList}}"
wx:key="index"
>{{item}}
</van-tag>
</view>
</van-grid-item>
</van-grid>
<view wx:if="{{ item.stalls.length==0 }}" class="none-text">待入驻...</view>
</view>
</view>
</scroll-view>
<!-- https://juejin.cn/post/7140224109640630302 -->
// pages/market/market.js
import { doRequestList } from '../../http/marketApi'
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
statusBarHeight: app.globalData.statusBarHeight,
winHeight: '100%',
container:null,
active:0,
marketList:[],
intoindex:"",
scrollHeight:"",
anchorArray:[],
topName:"",
topAddress:"",
preventTrigger:true,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getMarket()
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#FE6526',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})
},
onShow() {
},
goDetail(event){
let itemData= event.currentTarget.dataset.bean;
var shareData = {
eiId:itemData.enterpriseId,
}
const BuildData = JSON.stringify(shareData);
wx.navigateTo({ url: `/pages/ChoseGoods/ChoseGoods?detInfo=`+ encodeURIComponent(BuildData) });
},
// https://www.jianshu.com/p/41f1289cf42d
handelScroll(e){
console.log("相互")
let scrollTop = e.detail.scrollTop
var _this = this
let scrollArr = _this.data.anchorArray;
console.log(scrollArr)
for (let i = 0; i < scrollArr.length; i++) {
if(scrollTop >= 0 && scrollTop < scrollArr[0]) {
_this.setData({
active: 0,
preventTrigger:false
});
} else if(scrollTop>=scrollArr[i-1]&&scrollTop<scrollArr[i]){
_this.setData({
active: i,
preventTrigger:false
});
}
}
let query = wx.createSelectorQuery().in(_this);
let heightArr = [];
let h = 0;
query.selectAll('.contact-box').boundingClientRect((react) => {
react.forEach((res) => {
h += res.height;
heightArr.push(h)
})
_this.setData({
anchorArray: heightArr
});
}).exec();
},
getMarket(){
doRequestList("8b188f986f1311eebd9b1c1b0dc7da9c").then((res) => {
let resData = res.data;
console.log(resData)
let newGoods = resData.areas.map((item) => {
let childFloor = item.stalls.map((each) => {
return {
...each,
salesList: each.salesVarieties.split(",")
}
})
return {
...item,
stalls: childFloor,
};
});
console.log(newGoods)
this.setData({
marketList: newGoods,
topName:resData.name,
topAddress:resData.address,
})
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
const tabBar = this.getTabBar()
tabBar.setData({
TabBarActive: 0
})
},
onBeforeChange(event){
console.log("已经执行")
const { callback, title } = event.detail;
this.setData({
preventTrigger:true
})
callback(true)
},
ChangeTab(event){
if(this.data.preventTrigger==false){
return
}
console.log("执行")
let indexSeled =Number(event.detail.index)
this.setData({
intoindex:'intoindex'+indexSeled
})
},
/**
* 生命周期函数--监听页面显示
*/
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
/* pages/market/market.wxss */
.scroller{
/* height: calc(100vh - 0rpx); */
height: calc(100vh - 300rpx);
/*margin-top: 110px;*/
}
.contact-name{
width: 100%;
font-size: 28rpx;
box-sizing: border-box;
padding: 12rpx 16rpx 16rpx 28rpx;
/* background: white; */
color: #646566;
margin-top: 18rpx;
}
.van-tab__pane--active{
display: none!important;
}
.none-text{
text-align: center;
font-size: 30rpx;
padding: 20rpx 0rpx;
width: 100%;
color: #646566;
}
.contact-view{
display: flex;
justify-content: space-between;
/* background-color: white; */
flex-direction: row; /*设置主轴方向*/
flex-wrap: wrap;
flex-flow: row wrap;
box-sizing: border-box;
/*padding: 0rpx 20rpx 20rpx 20rpx;*/
width: 100%;
}
.contact-item{
/*width: 32%;*/
/*border: 1px solid #eee;*/
/*box-sizing: border-box;*/
/*padding: 16rpx 16rpx;*/
/*margin-bottom: 16rpx;*/
font-size: 28rpx;
border-radius: 8rpx;
background: white;
height: 200rpx;
/*box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)*/
}
.contact-view:after {content: ""; width: 32%; }
.grid-item_root{
height: 200rpx;
}
.grid-item_content{
font-size: 28rpx;
border-radius: 8rpx;
background: white;
}
.item-code{
text-align: center;
color: #FE6526;
font-weight: bold;
font-size: 34rpx!important;
}
.item-name{
text-align: center;
padding: 12rpx 0;
}
.item-more{
/*padding-bottom: 4rpx;*/
/*display: inline-flex;*/
}
.contact-main{
padding-bottom: 200rpx;
/* padding-top: 58px; */
}
/* 最上面是自定义的样式 */
.topbar {
background: #FE6526;
width: 100%;
/*height: 100px;*/
/*z-index: 99999;*/
/*position: fixed;*/
box-sizing: border-box;
padding: 20rpx 20rpx;
top: 0;
left: 0;
/*z-index: 999;*/
border-bottom: 1px solid #d7dae2;
color: white;
}
.top-name{
margin-top: 4rpx;
font-size: 34rpx;
}
.top-address{
font-size: 28rpx;
margin-top: 3rpx;
color: white;
}
.top-comend {
width: 100%;
height: 45px;
}
网友评论