首頁丝滑

This commit is contained in:
魏啾
2024-05-16 15:08:20 +08:00
parent 855e165bff
commit d16da9cdba
5 changed files with 109 additions and 61 deletions

View File

@@ -17,8 +17,8 @@
<!-- 标题搜索框 -->
<view class="flex-between">
<view class="navbar_tow_one flex-start" @click="uindexlist">
<text class="textnth-childone">美味抢先点</text>
<text class="textnth-childtow">西安</text>
<text class="textnth-childone">{{NAME}}</text>
<text class="textnth-childtow">{{form.address}}</text>
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
size="16"></u-icon>
</view>
@@ -60,8 +60,8 @@
</view>
</view>
<view class="fivecontent" >
<!-- <view class="fivecontent" :style="{'height':seighT + 'px'}"> -->
<view class="fivecontent">
<!-- <view class="fivecontent" :style="{'height':seighT + 'px'}"> -->
<!-- <scroll-view :style="{'height':seighT + 'px'}" scroll-y @scrolltolower="loadMore"
scroll-with-animation> -->
<view class="fivecontent_item" v-for="(item,index) in homelist" :key="index"
@@ -165,8 +165,8 @@
<!-- 标题搜索框 -->
<view class="flex-between">
<view class="navbar_tow_one flex-start" @click="uindexlist">
<text class="textnth-childone">八点八零</text>
<text class="textnth-childtow">西安</text>
<text class="textnth-childone">{{NAME}}</text>
<text class="textnth-childtow">{{form.address}}</text>
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
size="16"></u-icon>
</view>
@@ -188,26 +188,26 @@
</view>
</view>
<!-- 显示下拉字段 -->
<view class="sixcontent" v-if="clickhometoplistmenulist.detail">
<view class="sixcontent" v-if="clickhometoplistmenulist.quilt == '1' ">
<view class="sixcontentitemP flex-start" style="padding-bottom:0 ;">
<category style="width: 100%;" :categoryList="clickhometoplistmenulist.detail"
:subCategoryList="subCategoryList" @categoryMainClick="categoryMainClick"
@categorySubClick="categorySubClick">
</category>
</view>
</view>
<view class="sixcontent" v-else>
<view class="sixcontentitemP flex-colum-start">
<view class="sixcontentitemP_item"
:class="index == clickdetailindex ?'sixcontentitemP_itemactive':''"
v-for="(item,index) in clickhometoplistmenulist.detail" :key="index"
@click="clickdetail(item,index)">
{{item.label}}
{{item.name}}
</view>
</view>
</view>
<view class="sixcontent" v-if="clickhometoplistmenulist.districts">
<view class="sixcontentitemP flex-start" style="padding-bottom:0 ;">
<category style="width: 100%;"
:categoryList="clickhometoplistmenulist.districts"
:subCategoryList="subCategoryList" @categoryMainClick="categoryMainClick"
@categorySubClick="categorySubClick">
</category>
</view>
</view>
</view>
</u-popup>
@@ -233,6 +233,7 @@
},
data() {
return {
NAME: uni.cache.get('NAME'),
timersetInterval: '0', //定时器
isFixedTop: false, //吸顶是否显示
Topdistance: 3000, //吸顶初始距离
@@ -249,7 +250,10 @@
itemStyle: [ //样式
],
homelist: [], //下面数据
clickhometoplistmenulist: {}, //下拉点击的数据
clickhometoplistmenulist: {
detail: [],
quilt: ''
}, //下拉点击的数据
form: {
address: '西安市', //地址
type: '', //品类
@@ -291,10 +295,14 @@
return this.$store.getters.is_BarHeight
},
},
async onLoad() {
mounted() {
setTimeout(() => {
this.GetTop()
this.$nextTick(() => {
this.GetTop()
});
}, 1000)
// 当组件挂载完成后获取距离
},
onReachBottom() {
this.onLoadhome()
@@ -302,28 +310,50 @@
onShow() {
uni.getLocation({
type: 'wgs84',
success: (res) => {
let datastorage = {
address: '西安市', //地址
success: async (res) => {
let successres = await this.api.geocodelocation({
lng: res.longitude,
lat: res.latitude,
})
if (successres.code == 0) {
let datastorage = {
country: successres.data.addressComponent.country, // "中国"
province: successres.data.addressComponent.province, //province: "陕西省"
address: successres.data.addressComponent.city, //district: "西安市"
district: successres.data.addressComponent.district, //district: "未央区"
lng: res.longitude,
lat: res.latitude,
}
uni.cache.set('getLocationstorage', datastorage);
this.hometop()
this.init_fn()
this.timersetInterval = '0'
}
uni.cache.set('getLocationstorage', datastorage);
this.hometop()
this.init_fn()
this.timersetInterval = '0'
},
fail: (err) => {
let datastorage = {
address: '西安市', //地址
lng: res.longitude,
lat: res.latitude,
}
uni.cache.set('getLocationstorage', datastorage);
this.hometop()
this.init_fn()
this.timersetInterval = '0'
fail: async (err) => {
console.log(err, '获取错误')
let successres = await this.api.geocodelocation({
lng: '',
lat: '',
})
if (successres.code == 0) {
console.log(successres.data.addressComponent.streetNumber.location.split(','))
let res = successres.data.addressComponent.streetNumber.location.split(',')
// this.form.lng = res[0]
// this.form.lat = res[1]
let datastorage = {
country: successres.data.addressComponent.country, // "中国"
province: successres.data.addressComponent.province, //province: "陕西省"
address: successres.data.addressComponent.city, //district: "西安市"
district: successres.data.addressComponent.district, //district: "未央区"
lng: res[0],
lat: res[1],
}
uni.cache.set('getLocationstorage', datastorage);
this.hometop()
this.init_fn()
this.timersetInterval = '0'
}
}
});
@@ -354,11 +384,8 @@
success: (data) => {
this.seighT = data.windowHeight;
this.$u.getRect('.fourcontent').then(res => {
this.Topdistance = res.top - this.HeighT.heightBar //滚动距离
this.seighT = this.seighT - res.height //高度
})
this.$u.getRect('.navbar').then(res => {
this.seighT = this.seighT - res.height //高度
console.log(res.top)
this.Topdistance = res.top - res.height -20 //滚动距离
})
}
})
@@ -461,9 +488,10 @@
this.viewHistoryindex = index
if (item.dictName == 'allCity') {
let res = await this.api.locationdistrict({
keywords: '西安市'
keywords: uni.cache.get('getLocationstorage').address
})
this.clickhometoplistmenulist = res.data[0]
this.clickhometoplistmenulist.detail = res.data
this.clickhometoplistmenulist.quilt = '1'
} else {
this.clickhometoplistmenulist = item
}
@@ -488,7 +516,7 @@
console.log(category);
this.clickdetailindex = index
this.showproductlist = false
this.hometoplist.menu[this.viewHistoryindex].name = item.label
this.hometoplist.menu[this.viewHistoryindex].name = item.name
switch (item.dictName) {
case 'category':
// 品类
@@ -507,13 +535,28 @@
},
//城市二级菜单
categoryMainClick(category) {
console.log(category);
this.subCategoryList = category.category.districts;
console.log(category.category.name);
if (category.category.name == '全城') {
this.showproductlist = false
this.form.lng = uni.cache.get('getLocationstorage').lng,
this.form.lat = uni.cache.get('getLocationstorage').lat,
this.form.address = uni.cache.get('getLocationstorage').address, //地址
this.form.page = 1
this.form.size = 10
this.form.status = 'loadmore'
this.homelist = []
this.onLoadhome()
this.hometoplist.menu[this.viewHistoryindex].name = uni.cache.get('getLocationstorage').address
this.subCategoryList = []
} else {
this.subCategoryList = category.category.districts;
}
},
//确定街道菜单赋值
categorySubClick(category) {
console.log(category);
this.hometoplist.menu[this.viewHistoryindex].name = category.name
this.form.address = category.name //地址
this.showproductlist = false
console.log(category.center.split(','))
let res = category.center.split(',')
@@ -718,8 +761,7 @@
.fivecontent {
padding: 0 28rpx;
overflow: auto;
height: 100vh;
.fivecontent_item:nth-child(1) {
margin-top: 0;
}