From c62506931f22c452384cf9e305953237775c9e86 Mon Sep 17 00:00:00 2001
From: luo <17530855@qq.com>
Date: Thu, 25 Jan 2024 09:43:43 +0800
Subject: [PATCH] 首页悬浮优化
---
components/diy_floatingWindow/diy_floatingWindow.wxss | 6 +++---
components/diy_scan/diy_scan.wxss | 2 +-
components/diy_service/diy_service.wxss | 4 ++--
pages/index/index/index.js | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
pages/index/index/index.json | 1 +
pages/index/index/index.wxml | 28 ++++++++++++++++------------
pages/template/index.js | 132 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------
pages/template/index.json | 3 ++-
pages/template/index.wxml | 161 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------
9 files changed, 265 insertions(+), 136 deletions(-)
diff --git a/components/diy_floatingWindow/diy_floatingWindow.wxss b/components/diy_floatingWindow/diy_floatingWindow.wxss
index 60919ad..245e84b 100644
--- a/components/diy_floatingWindow/diy_floatingWindow.wxss
+++ b/components/diy_floatingWindow/diy_floatingWindow.wxss
@@ -1,11 +1,11 @@
.custom-service {
- width: 100rpx;
- height: 100rpx;
+ width: 80rpx;
+ height: 80rpx;
/* background-color: red; */
border-radius: 50%;
z-index: 100;
line-height: 28rpx;
- position: fixed;
+ /* position: fixed; */
top: 50%;
/* background-position: 50%; */
diff --git a/components/diy_scan/diy_scan.wxss b/components/diy_scan/diy_scan.wxss
index 37b8376..eee15fb 100644
--- a/components/diy_scan/diy_scan.wxss
+++ b/components/diy_scan/diy_scan.wxss
@@ -1,5 +1,5 @@
.scan_view{
- position: fixed;z-index: 100; left: 0; top: 0; width: 100rpx; height: 100rpx;
+ z-index: 100; left: 0; top: 0; width: 80rpx; height: 80rpx;
border-radius: 50%; background-color: rgba(125,125,2,0.5);box-shadow: #ccc 0px 0px 70px 1px;
display: flex;align-items: center;justify-content: center; color: #f8f8f8;
}
diff --git a/components/diy_service/diy_service.wxss b/components/diy_service/diy_service.wxss
index 57658b5..9c7b0e3 100644
--- a/components/diy_service/diy_service.wxss
+++ b/components/diy_service/diy_service.wxss
@@ -1,6 +1,6 @@
-.custom-service{ width: 100rpx; height: 100rpx; border-radius: 50%; background-color: #fff;z-index: 100;
+.custom-service{ width: 80rpx; height: 80rpx; border-radius: 50%; background-color: #fff;z-index: 100;
border: 1px solid #adadad; box-shadow: 0 0 10px 2px #adadad; line-height: 28rpx;
- position: fixed; top: 40%; right: 2rpx; display: flex;align-items: center;justify-content: center;}
+ right: 2rpx; display: flex;align-items: center;justify-content: center;}
.cs-img{ width: 36rpx; height: 36rpx;}
.s_title{ font-size: 14rpx;}
\ No newline at end of file
diff --git a/pages/index/index/index.js b/pages/index/index/index.js
index 168a409..7fa8032 100644
--- a/pages/index/index/index.js
+++ b/pages/index/index/index.js
@@ -95,7 +95,7 @@ Page({
nav_backgroundColor: "#ff7295",
nav_type: 1, //导航类型
searchbox_transparent: 1, //搜索框背景是否透明
-
+ is_show_top:0, //是否置顶显示
// nav_but_color: '#32ACF9', //导航按钮颜色
// sele_pickup: null, //默认门店
// nav_bg_color:'#e823e8', //导航按钮颜色
@@ -655,6 +655,9 @@ Page({
let is_full_screen_navigation = false
let is_full_screen_navigation_index = -1
let nav_but_color = "#32ACF9"
+ let left_arr = [] //左边悬浮
+ let right_arr=[] //右边悬浮
+ let floatw=null //悬浮窗口
if (t_arr) {
t_arr.map((item, index) => {
if (item && item.content && item.content.full_screen == 1 && !is_full_screen_navigation) {
@@ -664,8 +667,52 @@ Page({
nav_but_color = item.content.data[0].but_color
} catch (error) { }
}
+ if (item.ename=='floatingWindow') {
+ floatw = item
+ }
+ if (item.ename=='backTop' || item.ename=='onlineService' || item.ename=='scan' || item.ename=='floatingWindow') {
+ right_arr.push(item)
+ }
})
}
+ if (floatw && floatw.content) {
+ let fi = right_arr.findIndex(ite=>ite.ename=='floatingWindow')
+ let datas={}
+ if (!floatw.content.data) { //兼容旧的悬浮窗口
+ datas.AppId= floatw.content.AppId
+ datas.feedId= floatw.content.feedId
+ datas.finderUserName= floatw.content.finderUserName
+ datas.img=floatw.content.img
+ datas.video_type= floatw.content.video_type
+ datas.wxapp_url= floatw.content.wxapp_url
+ datas.wxapp_url_title=floatw.content.wxapp_url_title
+ floatw.content.data=[datas]
+ }
+ if (floatw.content.loaction_index==1) {
+ right_arr.splice(fi,1,floatw)
+ // right_arr.unshift(floatw)
+ }else{
+ left_arr.unshift(floatw)
+ right_arr.splice(fi,1)
+ }
+ }
+ if (left_arr.length>0) {
+ let obj={
+ ename:'floatingBox',
+ content:left_arr,
+ loaction_index:0
+ }
+ t_arr.push(obj)
+ }
+ if (right_arr.length>0) {
+ let obj={
+ ename:'floatingBox',
+ content:right_arr,
+ loaction_index:1
+ }
+ t_arr.push(obj)
+ }
+
th.setData({
nav_but_color,
@@ -961,8 +1008,8 @@ Page({
},
onPageScroll: function (e) {
//满屏模式监听
+ let num = e.scrollTop
if (this.data.is_full_screen_navigation) {
- let num = e.scrollTop
let nav_type = this.data.nav_type
if (num >= 100 && nav_type) {
this.setData({
@@ -981,7 +1028,20 @@ Page({
// this.data.nav_type = 1
}
}
+
//-----------end-------
+ //是否显示置顶
+ if (num > 400) {
+ this.setData({
+ is_show_top:1
+ })
+ }else{
+ this.setData({
+ is_show_top:0
+ })
+ }
+ //----end------
+
this.data.scrollTop = e.scrollTop;
var t = getCurrentPages();
"pages/index/index/index" == t[t.length - 1].route;
diff --git a/pages/index/index/index.json b/pages/index/index/index.json
index 801f950..011549b 100644
--- a/pages/index/index/index.json
+++ b/pages/index/index/index.json
@@ -29,6 +29,7 @@
"mp-dialog": "weui-miniprogram/dialog/dialog",
"mp-sticky": "/components/mp-sticky/mp-sticky",
"floatingWindow": "/components/diy_floatingWindow/diy_floatingWindow",
+ "floatingBox": "/components/diy_floatingBox/diy_floatingBox",
"privacy_pop": "/components/privacy_pop/privacy_pop"
},
"enablePullDownRefresh": false,
diff --git a/pages/index/index/index.wxml b/pages/index/index/index.wxml
index 566bb91..00ee5a5 100644
--- a/pages/index/index/index.wxml
+++ b/pages/index/index/index.wxml
@@ -50,7 +50,7 @@
-
+
@@ -529,7 +529,6 @@
-
@@ -566,10 +565,22 @@
+
+
+
+
-
+
+
+
+
+
@@ -578,14 +589,7 @@
-
-
-
-
-
-
-
-
+
diff --git a/pages/template/index.js b/pages/template/index.js
index 621dea9..3d2296e 100644
--- a/pages/template/index.js
+++ b/pages/template/index.js
@@ -26,6 +26,7 @@ Page({
sele_pickup: null, //默认门店
// nav_bg_color:'#e823e8', //导航按钮颜色
//----------------
+ is_show_top: 0, //是否置顶显示
},
onLoad: function (e) {
@@ -56,7 +57,7 @@ Page({
title: getApp().globalData.config.store_name,
});
th.setData({
- nav_title:getApp().globalData.config.store_name
+ nav_title: getApp().globalData.config.store_name
})
} else {
wx.setNavigationBarTitle({
@@ -119,21 +120,68 @@ Page({
title: temp_data.page_title,
});
var t_arr = JSON.parse(temp_data.json_str);
- //增加判断是否是满屏
- let is_full_screen_navigation = false
- let is_full_screen_navigation_index = -1
- let nav_but_color ="#32ACF9"
- if (t_arr) {
- t_arr.map((item,index)=>{
- if (item && item.content && item.content.full_screen==1 && !is_full_screen_navigation) {
- is_full_screen_navigation = true
- is_full_screen_navigation_index = index
- try {
- nav_but_color = item.content.data[0].but_color
- } catch (error) {}
- }
- })
- }
+ //增加判断是否是满屏
+ let is_full_screen_navigation = false
+ let is_full_screen_navigation_index = -1
+ let nav_but_color = "#32ACF9"
+ let left_arr = [] //左边悬浮
+ let right_arr=[] //右边悬浮
+ let floatw=null //悬浮窗口
+ if (t_arr) {
+ t_arr.map((item, index) => {
+ if (item && item.content && item.content.full_screen == 1 && !is_full_screen_navigation) {
+ is_full_screen_navigation = true
+ is_full_screen_navigation_index = index
+ try {
+ nav_but_color = item.content.data[0].but_color
+ } catch (error) { }
+ }
+ if (item.ename=='floatingWindow') {
+ floatw = item
+ }
+ if (item.ename=='backTop' || item.ename=='onlineService' || item.ename=='scan' || item.ename=='floatingWindow') {
+ right_arr.push(item)
+ }
+ })
+ }
+ if (floatw && floatw.content) {
+ let fi = right_arr.findIndex(ite=>ite.ename=='floatingWindow')
+ let datas={}
+ if (!floatw.content.data) { //兼容旧的悬浮窗口
+ datas.AppId= floatw.content.AppId
+ datas.feedId= floatw.content.feedId
+ datas.finderUserName= floatw.content.finderUserName
+ datas.img=floatw.content.img
+ datas.video_type= floatw.content.video_type
+ datas.wxapp_url= floatw.content.wxapp_url
+ datas.wxapp_url_title=floatw.content.wxapp_url_title
+ floatw.content.data=[datas]
+ }
+ if (floatw.content.loaction_index==1) {
+ right_arr.splice(fi,1,floatw)
+ // right_arr.unshift(floatw)
+ }else{
+ left_arr.unshift(floatw)
+ right_arr.splice(fi,1)
+ }
+ }
+ if (left_arr.length>0) {
+ let obj={
+ ename:'floatingBox',
+ content:left_arr,
+ loaction_index:0
+ }
+ t_arr.push(obj)
+ }
+ if (right_arr.length>0) {
+ let obj={
+ ename:'floatingBox',
+ content:right_arr,
+ loaction_index:1
+ }
+ t_arr.push(obj)
+ }
+
th.setData({
nav_but_color,
is_full_screen_navigation,
@@ -160,8 +208,8 @@ Page({
backgroundColor: temp_data.top_color, // 必写项
})
th.setData({
- // nav_frontColor: top_w_color, // 必写项
- nav_backgroundColor: temp_data.top_color, // 必写项
+ // nav_frontColor: top_w_color, // 必写项
+ nav_backgroundColor: temp_data.top_color, // 必写项
})
}
@@ -171,43 +219,53 @@ Page({
},
- //广告轮播满屏按钮颜色传递方法
- bindbut_color_event_fn(even){
- let nav_but_color = even.detail.but_color
- this.setData({
- nav_but_color
- })
- },
+ //广告轮播满屏按钮颜色传递方法
+ bindbut_color_event_fn(even) {
+ let nav_but_color = even.detail.but_color
+ this.setData({
+ nav_but_color
+ })
+ },
onPageScroll: function (e) {
//满屏模式监听
+ let num = e.scrollTop
if (this.data.is_full_screen_navigation) {
- let num = e.scrollTop
let nav_type = this.data.nav_type
if (num >= 100 && nav_type) {
this.setData({
- nav_type:0,
- searchbox_transparent:0,
- nav_frontColor:'#000'
+ nav_type: 0,
+ searchbox_transparent: 0,
+ nav_frontColor: '#000'
})
// this.data.nav_type = 0
}
if (num < 100 && !nav_type) {
this.setData({
- nav_type:1,
- searchbox_transparent:1,
- nav_frontColor:'#fff'
+ nav_type: 1,
+ searchbox_transparent: 1,
+ nav_frontColor: '#fff'
})
// this.data.nav_type = 1
}
}
//-----------end-------
+ //是否显示置顶
+ if (num > 400) {
+ this.setData({
+ is_show_top: 1
+ })
+ } else {
+ this.setData({
+ is_show_top: 0
+ })
+ }
+ //----end------
+ // this.data.scrollTop = e.scrollTop;
+ // var t = getCurrentPages();
+ // "pages/index/index/index" == t[t.length - 1].route;
- // this.data.scrollTop = e.scrollTop;
- // var t = getCurrentPages();
- // "pages/index/index/index" == t[t.length - 1].route;
-
- },
+ },
onPullDownRefresh: function (e) {
},
diff --git a/pages/template/index.json b/pages/template/index.json
index 0d90bdf..1ff9072 100644
--- a/pages/template/index.json
+++ b/pages/template/index.json
@@ -25,8 +25,9 @@
"service": "/components/diy_service/diy_service",
"scan": "/components/diy_scan/diy_scan",
"floatingWindow": "/components/diy_floatingWindow/diy_floatingWindow",
+ "floatingBox": "/components/diy_floatingBox/diy_floatingBox",
"presell": "/components/diy_pregoods/diy_pregoods"
- },
+ },
"enablePullDownRefresh": false,
"onReachBottomDistance":300,
"navigationStyle":"custom"
diff --git a/pages/template/index.wxml b/pages/template/index.wxml
index 6dc4f0e..ae345ff 100644
--- a/pages/template/index.wxml
+++ b/pages/template/index.wxml
@@ -1,72 +1,72 @@
-
+
-
-
+
+
-
+
-
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
@@ -83,7 +83,7 @@
-
+
@@ -119,7 +119,7 @@
-
+
-
-
-
-
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
@@ -156,22 +161,22 @@
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
--
libgit2 0.21.4