From 5fbdaea928805c4841d438941fae11d3993158ed Mon Sep 17 00:00:00 2001 From: luca Date: Fri, 5 Jun 2020 09:09:04 +0800 Subject: [PATCH] 修改切换样式 --- pages/goods/categoryList/categoryList.js | 236 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------- pages/goods/categoryList/categoryList.wxml | 59 +++++++++++++++++++++++++++++++++++++++++------------------ pages/goods/categoryList/categoryList.wxss | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------ 3 files changed, 273 insertions(+), 110 deletions(-) diff --git a/pages/goods/categoryList/categoryList.js b/pages/goods/categoryList/categoryList.js index fcd1c55..4490edd 100644 --- a/pages/goods/categoryList/categoryList.js +++ b/pages/goods/categoryList/categoryList.js @@ -1,5 +1,4 @@ var t = getApp(), e = t.request, oo = t.globalData.setting; - var i = function (i) { return i && i.__esModule ? i : { default: i @@ -7,65 +6,87 @@ var i = function (i) { }(require("../../../utils/LoadMore.js")), a = new i.default(), ut = require("../../../utils/util.js"); //t = i,e = t Page({ - data: { - is_date:true, - scrollHeight: 0, - currentTab:-1, - abc:0, - windowHeight:0, - windowWidth: 0, - eachLetterHeight:0, - lettersPosition:0, - catelist:null, //分类读取 - nationlist: null,//国家读取 - groups: null, //品牌读取 - iurl: oo.imghost,//图片地址 - - // 当前选择的导航字母 - selected: 0, - // 选择字母视图滚动的位置id - scrollIntoView: 'A', - // 导航字母 - letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', - 'U', 'V', 'W', 'X', 'Y', 'Z'], - //控制新旧分类版本 - is_used_share:0, - //国家的控制属性 - is_country:1, - //品牌的控制属性 - is_brand:1, - //选择分类的控制属性 - select_classify_on:223, - index:223, - classify_name:"国家",//项目类型 - brand_list:null,//品牌列表 - - one_level_classify:[],// 新的版本左边的边分类1级 - is_level_three:0,//判断有没有3级 - cat_id:0, - pl_timer: null,//只有品类的定时器 - is_pl_time:0, - requestData:null, //风格三的商品数据列表 分页 - stylePage:1, //商品列表分页标识 - - //风格三使用 - url: t.globalData.setting.imghost, - currentPage: 1, - requestData: null, - allData: null, - openFilterModal: !1, - baseUrl: "api/weshop/goods/page?1=1&cat_id=1&parent_id=0&orderField=goods_id&orderType=desc&page=1&is_mainshow=1&isonsale=1&store_id="+oo.stoid+"&is_recommend=1", - requestUrl: "", - tabname: "goods_id", //排序的字段 - adname: "desc", //升降的字段 - is_new: 0, - is_hot: 0, - msgStatus:false, //页面显示暂无数据状态 - countDownNum: 3, - timer: '', //定时器 - lastMsg:false, - toView:"", - }, + data: { + is_date:true, + scrollHeight: 0, + currentTab:-1, + abc:0, + windowHeight:0, + windowWidth: 0, + eachLetterHeight:0, + lettersPosition:0, + catelist:null, //分类读取 + nationlist: null,//国家读取 + groups: null, //品牌读取 + iurl: oo.imghost,//图片地址 + + // 当前选择的导航字母 + selected: 0, + // 选择字母视图滚动的位置id + scrollIntoView: 'A', + // 导航字母 + letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', + 'U', 'V', 'W', 'X', 'Y', 'Z'], + //控制新旧分类版本 + is_used_share:0, + //国家的控制属性 + is_country:1, + //品牌的控制属性 + is_brand:1, + //选择分类的控制属性 + select_classify_on:223, + index:223, + classify_name:"国家",//项目类型 + brand_list:null,//品牌列表 + + one_level_classify:[],// 新的版本左边的边分类1级 + is_level_three:0,//判断有没有3级 + cat_id:0, + pl_timer: null,//只有品类的定时器 + is_pl_time:0, + requestData:null, //风格三的商品数据列表 分页 + stylePage:1, //商品列表分页标识 + + //风格三使用 + url: t.globalData.setting.imghost, + currentPage: 1, + allData: null, + openFilterModal: !1, + baseUrl: "api/weshop/goods/page?1=1&cat_id=1&parent_id=0&orderField=goods_id&orderType=desc&page=1&is_mainshow=1&isonsale=1&store_id="+oo.stoid+"&is_recommend=1", + requestUrl: "", + tabname: "goods_id", //排序的字段 + adname: "desc", //升降的字段 + is_new: 0, + is_hot: 0, + msgStatus:false, //页面显示暂无数据状态 + countDownNum: 3, + timer: '', //定时器 + lastMsg:false, + toView:"", + is_show_class:false,//是否添加新样式 + status_show:0, + currentTab: 0, //预设当前项的值 + }, + + + //判断当前滚动超过一屏时，设置tab标题滚动条。 + checkCor: function() { + let that = this; + //这里计算按照实际情况进行修改，动态数据要进行动态分析 + //思路：窗体高度/单个分类高度 200rpx 转px计算 =>得到一屏幕所显示的个数，结合后台传回分类总数进行计算 + //数据很多可以多次if判断然后进行滚动距离计算即可 + if (that.data.currentTab > 7) { + that.setData({ + scrollTop: 500 + }) + } else { + that.setData({ + scrollTop: 0 + }) + } + }, + + onLoad: function(tt) { var that = this; that.get_brand(); @@ -189,10 +210,14 @@ Page({ } that.setData({ is_level_three: is_lev_thr }); if (is_lev_thr!=1) { - that.setData({ select_classify_on: 0, index: 0, classify_name: item.items.name, goodslist: item.array }); - } else { - that.setData({ select_classify_on: 0, index: 0, goodslist: arr }); - } + that.setData({ select_classify_on: 0, index: 0, classify_name: item.items.name,cat_id: item.items.id,goodslist: item.array }); + console.log("id:="+item.items.id) + that.style(that.data.stylePage,that.data.cat_id); + } else { + that.setData({ select_classify_on: 0, index: 0, classify_name: item.items.name,cat_id: item.items.id,goodslist: arr }); + console.log("id:="+item.items.id) + that.style(that.data.stylePage,that.data.cat_id); + } } else{ that.setData({ select_classify_on: 0, index: 0, goodslist: null,classify_name:item.items.name,is_level_three: 0}); @@ -222,6 +247,12 @@ Page({ } else if (that.data.is_show_pl) { that.setData({ currentTab: 0 }); } + // 获取默认选中的第一个 + if(that.data.is_show_gb && that.data.select_classify_on == 223){ + that.setData({ status_show: 1 }); + }else if(that.data.is_show_pp && that.data.select_classify_on == 220){ + that.setData({ status_show: 2 }); + } }) }, @@ -291,8 +322,18 @@ Page({ } } } - } + for(var i=0;i 4){ + arr[i]['items']['name'] = mobile_name.substring(0, 4) + } + } + if(t.data.is_show_pl==1 && t.data.is_show_pp != 1 && t.data.is_show_gb != 1){ + arr[0]['items']['is_show_class'] = true; + } + //console.log(arr) t.setData({one_level_classify:arr}); } @@ -557,6 +598,37 @@ Page({ }, // 新的版本分类点击一级分类 click_classify:function(e){ + let cur = e.currentTarget.dataset.current; + if (this.data.currentTab == cur) { + return false; + } else { + wx.pageScrollTo({ + scrollTop: 0 + }) + this.setData({ + currentTab: cur, + select_classify_on:cur + }) + this.checkCor(); + } + // if(e.currentTarget.dataset.index == 223){ + // this.setData({ status_show: 1}); + // }else if(e.currentTarget.dataset.index == 220){ + // this.setData({ status_show: 2}); + // }else{ + // this.setData({ status_show: 0}); + // } + var arr2 = this.data.one_level_classify + for(var i=0;i + @@ -118,21 +118,26 @@ - - - + {{classify_name}} @@ -377,7 +400,7 @@ - + diff --git a/pages/goods/categoryList/categoryList.wxss b/pages/goods/categoryList/categoryList.wxss index 3f369be..7db823d 100644 --- a/pages/goods/categoryList/categoryList.wxss +++ b/pages/goods/categoryList/categoryList.wxss @@ -20,7 +20,7 @@ page{height: 100%; background: #fff;} } .active{ color:#F65959; - border-bottom: 4rpx solid #F65959; + /* border-bottom: 4rpx solid #F65959; */ } swiper{ text-align: center; @@ -223,7 +223,7 @@ overflow-y: scroll; .share_type{ margin: auto; width: 58%; - margin-top: 40rpx; + /* margin-top: 40rpx; */ } .xc-letter-spacing{ padding-left: 20rpx; @@ -231,10 +231,19 @@ padding-right: 29rpx; width: 58%; margin: auto; margin-top: 40rpx; -margin-left:28rpx; - +margin-left:28rpx; +} +/* 左边菜单点击样式 20200601 luca */ +.is_show_class{ +width: 100%; +background-color: white; +height: 50rpx; +line-height: 50rpx; +color:black; +font-weight: 700; } + .world_sn{ white-space: nowrap; overflow: hidden; @@ -243,25 +252,28 @@ width: 58%; margin: auto; margin-top: 35rpx; } -.select_classify{ - /* 20200530 update */ -/* background: #d60021; */ -background:white; -/* border-radius: 30rpx; */ -/* color: #fff; */ -color:black; +/* .select_classify{ */ + /* 20200530 update 转用.is_show_class*/ +/* background: #d60021; +border-radius: 30rpx; +color: #fff; height: 48rpx; -line-height: 45rpx; -font-weight:700; +line-height: 45rpx; */ +/* font-weight:700; */ -} -.select_classify.width80{ +/* } */ +/* .select_classify.width80{ */ /* 20200530updata */ /* width: 74.5%; */ - width: 100%; - height: 100rpx; - line-height: 100rpx; + /* height: 100rpx; + line-height: 100rpx; */ +/* } */ +.class_set_height{ + height: 50rpx; + line-height: 50rpx; + padding: 20rpx 0; } + .select_classify.width80.text-indent{ text-indent: 38rpx; padding-right: 20px; @@ -412,5 +424,45 @@ margin: auto; .brand_img_name {color: #666;} + +.tab-view { + /* height: 100%; */ + width: 200rpx; + /* position: fixed; + left: 0; + top: 92rpx; + z-index: 10; */ +} + +.tab-bar-item { + width: 200rpx; + height: 110rpx; + /* background: #f6f6f6; */ + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + font-size: 26rpx; + color: #444; + font-weight: 400; +} + +.active { + position: relative; + color: #000; + font-size: 30rpx; + font-weight: 600; + background: #fcfcfc; +} + +.active::before { + content: ""; + position: absolute; + border-left: 8rpx solid #E41F19; + height: 50rpx; + left: 0; +} + + /* 风格三商品列表样式引入 */ @import "../goodsList/goodsList.wxss"; \ No newline at end of file -- libgit2 0.21.4