diff --git a/components/diy_serviceCard/diy_serviceCard.js b/components/diy_serviceCard/diy_serviceCard.js index d30f396..375573b 100644 --- a/components/diy_serviceCard/diy_serviceCard.js +++ b/components/diy_serviceCard/diy_serviceCard.js @@ -17,7 +17,13 @@ Component({ type: Object, value: null, }, - + sticky: { + type: Number, + }, + container: { + type: Object, + value: null, + }, }, data: { // 这里是一些组件内部数据 @@ -49,12 +55,19 @@ Component({ title_index: 0, swiper_hei: 0, title_class: "", + container: null, }, - ready: function() {}, + lifetimes: { + ready: function() { + this.setData({ + container: () => wx.createSelectorQuery().select('#container') + }); + }, attached: function() { + let myStyle = ''; //要兼容性的写法，因为有些商家都还未更新商品分组的最新的效果~~3.0公众号的html页面所以不用兼容写法 var nav_item = this.data.object; @@ -172,6 +185,10 @@ Component({ show: function() { //--初始化卡类-- // this.card_init(); + // this.setData({ + // container: () => wx.createSelectorQuery().select('#container') + // }); + console.log('onshow'); }, }, diff --git a/components/diy_serviceCard/diy_serviceCard.json b/components/diy_serviceCard/diy_serviceCard.json index e8cfaaf..17f7f47 100644 --- a/components/diy_serviceCard/diy_serviceCard.json +++ b/components/diy_serviceCard/diy_serviceCard.json @@ -1,4 +1,6 @@ { "component": true, - "usingComponents": {} + "usingComponents": { + "mp-sticky": "../mp-sticky/mp-sticky" + } } \ No newline at end of file diff --git a/components/diy_serviceCard/diy_serviceCard.wxml b/components/diy_serviceCard/diy_serviceCard.wxml index 92b3ec9..f4afde4 100644 --- a/components/diy_serviceCard/diy_serviceCard.wxml +++ b/components/diy_serviceCard/diy_serviceCard.wxml @@ -10,361 +10,219 @@ --> - - - - - - {{item.title}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {{item.goods_name}} - - - - - {{item.prom_integral}}积分 - + - ￥{{item.prom_price}} - - ￥{{item.market_price}} - - - - - - - - - - - - ￥ - {{filter.toFix(item[card_field],2)}} - - - {{card_name}} - - - - - - - ￥ - {{item.market_price}} - - - - - - - - ￥ - {{filter.toFix(item.shop_price,2)}} - - - - - - ￥ - {{item.market_price}} - - - - - - - - - - - ￥ - {{filter.toFix(item.shop_price,2)}} - - - - ￥ - {{item.market_price}} - - - - - - - ￥ - {{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}} - - - {{g_filter.get_card_price(item,card_list,1)}} - - - - - - - - - ￥ - {{filter.toFix(item.shop_price,2)}} - - - - - - ￥ - {{item.market_price}} - - - - - - - - ￥{{item.shop_price}} - ￥{{item.market_price}} - - - - - - 销量：{{item.sales_sum}}件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {{item.goods_name}} - - - - - {{item.prom_integral}}积分 - + - ￥{{item.prom_price}} - - ￥{{item.market_price}} - - - - - - - - - - - ￥ - {{filter.toFix(item[card_field],2)}} - - - {{card_name}} - - - - - - - ￥ - {{item.market_price}} - - - - - - - - ￥ - {{filter.toFix(item.shop_price,2)}} - - - - - - ￥ - {{item.market_price}} - - - - - - - - - - - ￥ - {{filter.toFix(item.shop_price,2)}} - - - - ￥ - {{item.market_price}} - - - - - - - ￥ - {{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}} - - - {{g_filter.get_card_price(item,card_list,1)}} + + + + + + {{item.title}} + + + + + + + + {{item.title}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{item.goods_name}} + + + + + {{item.prom_integral}}积分 + + + ￥{{item.prom_price}} + + ￥{{item.market_price}} + + + + + + + + + + + + ￥ + {{filter.toFix(item[card_field],2)}} + + + {{card_name}} + + + + + + + ￥ + {{item.market_price}} + + + + + + + + ￥ + {{filter.toFix(item.shop_price,2)}} + + + + + + ￥ + {{item.market_price}} + + + + + + + + + + + ￥ + {{filter.toFix(item.shop_price,2)}} + + + + ￥ + {{item.market_price}} + + + + + + + ￥ + {{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}} + + + {{g_filter.get_card_price(item,card_list,1)}} - - - - - - - - ￥ - {{filter.toFix(item.shop_price,2)}} - - - - - - ￥ - {{item.market_price}} - - - - - - - ￥{{item.shop_price}} - ￥{{item.market_price}} - - - - 销量：{{item.sales_sum}}件 - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + ￥ + {{filter.toFix(item.shop_price,2)}} + + + + + + ￥ + {{item.market_price}} + + + + + + + + ￥{{item.shop_price}} + ￥{{item.market_price}} + + + + + + 销量：{{item.sales_sum}}件 + + + + + + + + + + + + + + + + + + - - @@ -386,17 +244,17 @@ src='{{imghost}}/miniapp/images/Promotion.png'> - + + {{item.goods_name}} + - {{item.goods_name}} - - {{item.prom_integral}}积分 - + - ￥{{item.prom_price}} - + {{item.prom_integral}}积分 + + + ￥{{item.prom_price}} + ￥{{item.market_price}} @@ -412,7 +270,7 @@ {{filter.toFix(item[card_field],2)}} - {{card_name}} + {{card_name}} @@ -488,364 +346,529 @@ - ￥{{item.shop_price}} - ￥{{item.market_price}} + ￥{{item.shop_price}} + ￥{{item.market_price}} - 销量：{{item.sales_sum}}件 - + 销量：{{item.sales_sum}}件 + - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {{item.goods_name}} - - - - - {{item.prom_integral}}积分 - + - ￥{{item.prom_price}} - - ￥{{item.market_price}} - - - - - - - - - - - - - ￥ - {{filter.toFix(item[card_field],2)}} - - - {{card_name}} - - - - - - - ￥ - {{item.market_price}} - - - - - - - - ￥ - {{filter.toFix(item.shop_price,2)}} - - - - - - ￥ - {{item.market_price}} - - - - - - - - - - - ￥ - {{filter.toFix(item.shop_price,2)}} - - - - ￥ - {{item.market_price}} - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{item.goods_name}} + + + + {{item.prom_integral}}积分 + + + ￥{{item.prom_price}} + + ￥{{item.market_price}} + + + + + + + + + + + ￥ + {{filter.toFix(item[card_field],2)}} + + + {{card_name}} + + + + + + + ￥ + {{item.market_price}} + + + + + + + + ￥ + {{filter.toFix(item.shop_price,2)}} + + + + + + ￥ + {{item.market_price}} + + + + + + + + + + + ￥ + {{filter.toFix(item.shop_price,2)}} + + + + ￥ + {{item.market_price}} + + + + + + + ￥ + {{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}} + + + {{g_filter.get_card_price(item,card_list,1)}} + + + + + + + + + ￥ + {{filter.toFix(item.shop_price,2)}} + + + + + + ￥ + {{item.market_price}} + + + + + + + ￥{{item.shop_price}} + ￥{{item.market_price}} + + + + 销量：{{item.sales_sum}}件 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{item.goods_name}} + - - - - - ￥ - {{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}} - - {{g_filter.get_card_price(item,card_list,1)}} - - - - - - - - ￥ - {{filter.toFix(item.shop_price,2)}} - - - - - - ￥ - {{item.market_price}} - - - - + + + {{item.prom_integral}}积分 + + + ￥{{item.prom_price}} + + ￥{{item.market_price}} - + - ￥{{item.shop_price}} - ￥{{item.market_price}} + + + + + + + + + + ￥ + {{filter.toFix(item[card_field],2)}} + + + {{card_name}} + + + + + + + ￥ + {{item.market_price}} + + + + + + + + ￥ + {{filter.toFix(item.shop_price,2)}} + + + + + + ￥ + {{item.market_price}} + + + + + + + + + + + ￥ + {{filter.toFix(item.shop_price,2)}} + + + + ￥ + {{item.market_price}} + + + + + + + ￥ + {{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}} + + {{g_filter.get_card_price(item,card_list,1)}} + + + + + + + + ￥ + {{filter.toFix(item.shop_price,2)}} + + + + + + ￥ + {{item.market_price}} + + + + + + + + ￥{{item.shop_price}} + ￥{{item.market_price}} + + - - - - 销量：{{item.sales_sum}}件 - - - - - - + + 销量：{{item.sales_sum}}件 + + + + + + + + + + + + + + + + + + + —— 宝贝已经全部加载 —— + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{aitem.goods_name}} + + + + {{aitem.prom_integral}} + + + ￥{{aitem.prom_price}} + + ￥{{aitem.market_price}} + + + + + + + + + + + ￥ + {{filter.toFix(aitem[card_field],2)}} + + + {{card_name}} + + + + + + + ￥ + {{aitem.market_price}} + + + + + + + + ￥ + {{filter.toFix(aitem.shop_price,2)}} + + + + + + ￥ + {{aitem.market_price}} + + + + + + + + + + + ￥ + {{filter.toFix(aitem.shop_price,2)}} + + + + ￥ + {{aitem.market_price}} + + + + + + + ￥ + {{filter.toFix(g_filter.get_card_price(aitem,card_list,0),2)}} + + + {{g_filter.get_card_price(aitem,card_list,1)}} + + + + + + + + + ￥ + {{filter.toFix(aitem.shop_price,2)}} + + + + + + ￥ + {{aitem.market_price}} + + + + + + + ￥{{aitem.shop_price}} + ￥{{aitem.market_price}} + + + + 销量：{{aitem.sales_sum}}件 + + + + + + + + + + - - - - - - - - - - - - —— 宝贝已经全部加载 —— - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {{aitem.goods_name}} - - - - {{aitem.prom_integral}} - + - ￥{{aitem.prom_price}} - - ￥{{aitem.market_price}} - - - - - - - - - - - ￥ - {{filter.toFix(aitem[card_field],2)}} - - - {{card_name}} - - - - - - - ￥ - {{aitem.market_price}} - - - - - - - - ￥ - {{filter.toFix(aitem.shop_price,2)}} - - - - - - ￥ - {{aitem.market_price}} - - - - - - - - - - - ￥ - {{filter.toFix(aitem.shop_price,2)}} - - - - ￥ - {{aitem.market_price}} - - - - - - - ￥ - {{filter.toFix(g_filter.get_card_price(aitem,card_list,0),2)}} - - - {{g_filter.get_card_price(aitem,card_list,1)}} - - - - - - - - - ￥ - {{filter.toFix(aitem.shop_price,2)}} - - - - - - ￥ - {{aitem.market_price}} - - - - - - - ￥{{aitem.shop_price}} - ￥{{aitem.market_price}} - - - - 销量：{{aitem.sales_sum}}件 - - - - - - - - - \ No newline at end of file + + diff --git a/components/mp-sticky/mp-sticky.js b/components/mp-sticky/mp-sticky.js new file mode 100644 index 0000000..0a70f23 --- /dev/null +++ b/components/mp-sticky/mp-sticky.js @@ -0,0 +1,155 @@ +const selectQuery = require('./selectQuery') +const target = '.weui-sticky' + +Component({ + options: { + addGlobalClass: true, + // 指定所有 _ 开头的数据字段为纯数据字段 + pureDataPattern: /^_/, + multipleSlots: true // 在组件定义时的选项中启用多slot支持 + }, + behaviors: [selectQuery], + properties: { + offsetTop: { + type: Number, + value: 0 + }, + zIndex: { + type: Number, + value: 99 + }, + disabled: { + type: Boolean, + value: false, + }, + container: { + type: null + } + }, + data: { + fixed: false, + height: 0, + _attached: false, + _containerHeight: 0, + }, + + observers: { + disabled: function(newVal) { + if (!this.data._attached) return + newVal ? this.disconnectObserver() : this.initObserver() + }, + + container: function(newVal) { + if (typeof newVal !== 'function' || !this.data.height) return + this.observerContainer() + }, + + offsetTop: function(newVal){ + if(typeof newVal !== 'number' || !this.data._attached) return + this.initObserver() + } + + }, + + lifetimes: { + attached() { + this.data._attached = true + if (!this.data.disabled) this.initObserver() + }, + + detached() { + this.data._attached = false + this.disconnectObserver() + } + + }, + + methods: { + getContainerRect () { + const nodesRef = this.data.container() + return new Promise(resolve => nodesRef.boundingClientRect(resolve).exec()) + }, + + initObserver() { + this.disconnectObserver() + this.getRect(target).then(rect => { + this.setData({ + height: rect.height + }) + this.observerContent() + this.observerContainer() + }) + }, + + disconnectObserver(observerName) { + if (observerName) { + const observer = this[observerName] + observer && observer.disconnect() + } else { + this.contentObserver && this.contentObserver.disconnect() + this.containerObserver && this.containerObserver.disconnect() + } + }, + + observerContent() { + const {offsetTop} = this.data + this.disconnectObserver('contentObserver') + + const contentObserver = this.createIntersectionObserver({ + thresholds: [1], + initialRatio: 1 + }) + contentObserver.relativeToViewport({ + top: -offsetTop + }) + contentObserver.observe(target, res => { + if (this.data.disabled) return + this.setFixed(res.boundingClientRect.top) + }) + this.contentObserver = contentObserver + }, + + observerContainer() { + const {container, height, offsetTop} = this.data + if (typeof container !== 'function') return + + this.disconnectObserver('containerObserver') + this.getContainerRect().then(rect => { + this.getRect(target).then(contentRect => { + const _contentTop = contentRect.top + const _containerTop = rect.top + const _containerHeight = rect.height + const _relativeTop = _contentTop - _containerTop + const containerObserver = this.createIntersectionObserver({ + thresholds: [1], + initialRatio: 1 + }) + containerObserver.relativeToViewport({ + top: _containerHeight - height - offsetTop - _relativeTop + }) + containerObserver.observe(target, (res) => { + if (this.data.disabled) return + this.setFixed(res.boundingClientRect.top); + }) + this.data._relativeTop = _relativeTop + this.data._containerHeight = _containerHeight + this.containerObserver = containerObserver + }) + }) + }, + + setFixed(top) { + const {height, _containerHeight, _relativeTop, offsetTop} = this.data + const fixed = _containerHeight && height + ? (top >= height + offsetTop + _relativeTop - _containerHeight) && (top < offsetTop) + : top < offsetTop + this.triggerEvent('scroll', { + scrollTop: top, + isFixed: fixed + }) + + this.setData({fixed}) + } + } +}) + diff --git a/components/mp-sticky/mp-sticky.json b/components/mp-sticky/mp-sticky.json new file mode 100644 index 0000000..7e37c03 --- /dev/null +++ b/components/mp-sticky/mp-sticky.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/components/mp-sticky/mp-sticky.wxml b/components/mp-sticky/mp-sticky.wxml new file mode 100644 index 0000000..1114837 --- /dev/null +++ b/components/mp-sticky/mp-sticky.wxml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/components/mp-sticky/mp-sticky.wxs b/components/mp-sticky/mp-sticky.wxs new file mode 100644 index 0000000..266810f --- /dev/null +++ b/components/mp-sticky/mp-sticky.wxs @@ -0,0 +1,20 @@ + +/* eslint-disable */ +function wrapStyle(data) { + if (data.fixed) { + return 'top: ' + data.offsetTop + 'px;' + } + return '' +} + +function containerStyle(data) { + if (data.fixed) { + return 'height: ' + data.height + 'px; z-index: ' + data.zIndex + ';' + } + return '' +} + +module.exports = { + wrapStyle: wrapStyle, + containerStyle: containerStyle +} diff --git a/components/mp-sticky/mp-sticky.wxss b/components/mp-sticky/mp-sticky.wxss new file mode 100644 index 0000000..6e440ba --- /dev/null +++ b/components/mp-sticky/mp-sticky.wxss @@ -0,0 +1,11 @@ +.weui-sticky { + position: relative; +} + +.weui-sticky__fixed { + position: fixed; + left: 0; + top: 0; + width: 100%; + background-color: white; +} \ No newline at end of file diff --git a/components/mp-sticky/selectQuery.js b/components/mp-sticky/selectQuery.js new file mode 100644 index 0000000..c64cefd --- /dev/null +++ b/components/mp-sticky/selectQuery.js @@ -0,0 +1,31 @@ +module.exports = Behavior({ + methods: { + getRect(selector) { + return new Promise((resolve, reject) => { + this.createSelectorQuery() + .select(selector) + .boundingClientRect(rect => { + if (rect) { + resolve(rect) + } else { + reject(new Error(`can not find selector: ${selector}`)) + } + }).exec() + }) + }, + + getAllRects(selector) { + return new Promise((resolve, reject) => { + this.createSelectorQuery() + .selectAll(selector) + .boundingClientRect(rects => { + if (rects && rects.lenght > 0) { + resolve(rects) + } else { + reject(new Error(`can not find selector: ${selector}`)) + } + }).exec() + }) + } + } +}) diff --git a/pages/index/index/index.js b/pages/index/index/index.js index 052a9a3..5a97b31 100644 --- a/pages/index/index/index.js +++ b/pages/index/index/index.js @@ -84,6 +84,15 @@ Page({ full_ad: null, //全屏广告 full_screen: 0, //全屏广告 is_ok_h5: 0, //判断要不要显示关注二维码 + + container: null, + }, + + onReady() { + this.setData({ + container: () => wx.createSelectorQuery().select('#container') + }) + console.log('container', this.data.container); }, onLoad: async function (tt) { diff --git a/pages/index/index/index.json b/pages/index/index/index.json index d22f482..e3ab55c 100644 --- a/pages/index/index/index.json +++ b/pages/index/index/index.json @@ -21,7 +21,10 @@ "store_select": "/components/diy_store_select/diy_store_select", "presell": "/components/diy_pregoods/diy_pregoods", "luckyGo": "/components/diy_luckyGo/diy_luckyGo", - "serviceCard": "/components/diy_serviceCard/diy_serviceCard" + "serviceCard": "/components/diy_serviceCard/diy_serviceCard", + "live": "/components/diy_live/diy_live", + "mp-dialog": "weui-miniprogram/dialog/dialog", + "mp-sticky": "/components/mp-sticky/mp-sticky" }, "enablePullDownRefresh": false } \ No newline at end of file diff --git a/pages/index/index/index.wxml b/pages/index/index/index.wxml index e9e0d5e..9f6e410 100644 --- a/pages/index/index/index.wxml +++ b/pages/index/index/index.wxml @@ -45,6 +45,12 @@ + + + + + + @@ -137,6 +143,8 @@ + + @@ -528,7 +536,7 @@ - +