Commit 1f1dc1ea by 严立

LL - 组件更新

parent 0fe839b2
Showing with 311 additions and 693 deletions
import iOption from './option.js'
Component({
options: {
styleIsolation: 'apply-shared'
......@@ -22,85 +24,6 @@ Component({
value: ''
},
// 常规样式。
// 如果需要配置新标题样式,请在数组后面追加,避免影响其他页面。
normalStyle: {
type: Array,
value: [{
// 黑字 - 透明背景 转换 黑字 - 白色背景
titleColor: '#000000;',
bgColor: 'rgba(0, 0, 0, 0);',
logo: '',
logoSize: { width: '', height: '' },
}, {
// 黑字 - 白色背景 固定
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: '',
logoSize: { width: '', height: '' },
}, {
// 白字 - 透明背景 转换 黑字 - 白色背景
titleColor: '#FFFFFF;',
bgColor: 'rgba(0, 0, 0, 0);',
logo: '',
logoSize: { width: '', height: '' },
}, {
// 白字 - 透明背景 固定
titleColor: '#FFFFFF;',
bgColor: 'rgba(0, 0, 0, 0);',
logo: '',
logoSize: { width: '', height: '' },
}, {
// pages/home/home/home
titleColor: '#000000;',
bgColor: 'rgba(0, 0, 0, 0);',
logo: './image/1-1.png',
logoSize: { width: '200rpx', height: '60rpx' },
}, {
// pages/play/home/home
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: './image/2-1.png',
logoSize: { width: '130rpx', height: '126rpx' },
}]
},
// 滚动样式
scrollStyle: {
type: Array,
value: [{
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: '',
logoSize: { width: '', height: '' },
}, {
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: '',
logoSize: { width: '', height: '' },
}, {
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: '',
logoSize: { width: '', height: '' },
}, {
titleColor: '#FFFFFF;',
bgColor: 'rgba(0, 0, 0, 0);',
logo: '',
logoSize: { width: '', height: '' },
}, {
titleColor: 'blue;',
bgColor: '#FFFFFF;',
logo: './image/1-2.png',
logoSize: { width: '200rpx', height: '60rpx' },
}, {
titleColor: '#000000;',
bgColor: '#FFFFFF;',
logo: './image/2-1.png',
logoSize: { width: '130rpx', height: '126rpx' },
}]
},
// 样式索引,如果不想使用变换效果,传值 -1 即可。
styleIndex: {
type: Number,
......@@ -117,29 +40,36 @@ Component({
// 滚动达到多少时进行样式替换。
changeHeight: {
type: String,
value: '20rpx'
value: '50rpx'
},
iconBack: {
type: String,
value: './image/back.png'
value: 'null'
},
iconHome: {
type: String,
value: ''
// value: './image/home.png'
value: 'null'
},
},
// 组件内部属性
data: {
// 常规样式。
// 如果需要配置新标题样式,请在数组后面追加,避免影响其他页面。
normal: iOption().normal,
// 滚动样式
scroll: iOption().scroll,
// 当前样式
currentStyle: {
statusHeight: 0,
titleHeight: 0,
titleColor: '',
bgColor: '',
iconBack: '',
iconHome: '',
logo: '',
logoSize: { width: '0px', height: '0px' },
},
......@@ -220,20 +150,28 @@ Component({
let funcNavOccupyCss = ''
if (!this.data.isScrollChange) {
Object.assign(funcCurrentStyle, {
'titleColor': this.data.normalStyle[this.data.styleIndex].titleColor,
'bgColor': this.data.normalStyle[this.data.styleIndex].bgColor,
'logo': this.data.normalStyle[this.data.styleIndex].logo,
'logoSize': this.data.normalStyle[this.data.styleIndex].logoSize
'titleColor': this.data.normal[this.data.styleIndex].titleColor,
'bgColor': this.data.normal[this.data.styleIndex].bgColor,
'iconBack': this.data.normal[this.data.styleIndex].iconBack,
'iconHome': this.data.normal[this.data.styleIndex].iconHome,
'logo': this.data.normal[this.data.styleIndex].logo,
'logoSize': this.data.normal[this.data.styleIndex].logoSize
})
} else {
Object.assign(funcCurrentStyle, {
'titleColor': this.data.scrollStyle[this.data.styleIndex].titleColor,
'bgColor': this.data.scrollStyle[this.data.styleIndex].bgColor,
'logo': this.data.scrollStyle[this.data.styleIndex].logo,
'logoSize': this.data.scrollStyle[this.data.styleIndex].logoSize
'titleColor': this.data.scroll[this.data.styleIndex].titleColor,
'bgColor': this.data.scroll[this.data.styleIndex].bgColor,
'iconBack': this.data.scroll[this.data.styleIndex].iconBack,
'iconHome': this.data.scroll[this.data.styleIndex].iconHome,
'logo': this.data.scroll[this.data.styleIndex].logo,
'logoSize': this.data.scroll[this.data.styleIndex].logoSize
})
}
// 如果传参有图标则使用传参图标
if (this.data.iconBack !== 'null') funcCurrentStyle.iconBack = this.data.iconBack
if (this.data.iconHome !== 'null') funcCurrentStyle.iconBack = this.data.iconHome
// 设置占用元素高度。
if (this.data.isOccupy) {
funcNavOccupyCss = {
......
......@@ -10,8 +10,8 @@
<!-- 返回,主页按钮 -->
<view class="m-title-operation row ac" style="{{titleCss}}" wx:if="{{!winLogo}}">
<image class="m-title-operation-back" wx:if="{{iconBack}}" src="{{iconBack}}" bindtap='onBack'></image>
<image class="m-title-operation-home" wx:if="{{iconHome}}" src="{{iconHome}}" bindtap='onHome'></image>
<image class="m-title-operation-back" wx:if="{{currentStyle.iconBack}}" src="{{currentStyle.iconBack}}" bindtap='onBack'></image>
<image class="m-title-operation-home" wx:if="{{currentStyle.iconHome}}" src="{{currentStyle.iconHome}}" bindtap='onHome'></image>
</view>
<view class="row cc ac" wx:if="{{titleText && !titleImg}}">
<text class="m-title-text">{{titleText}}</text>
......
// 增加新的标题样式请在数组末尾添加,避免影响其他页面显示。
let styleOption = [
{
// 黑字 - 透明背景 转换 黑字 - 白色背景
'normal': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 0);', iconBack: './image/back-1.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } },
'scroll': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 1);', iconBack: './image/back-1.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } }
}, {
// 黑字 - 白色背景 固定
'normal': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 1);', iconBack: './image/back-1.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } },
'scroll': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 1);', iconBack: './image/back-1.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } }
}, {
// 白字 - 透明背景 转换 黑字 - 白色背景
'normal': { titleColor: '#FFFFFF;', bgColor: 'rgba(255, 255, 255, 0);', iconBack: './image/back-3.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } },
'scroll': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 1);', iconBack: './image/back-1.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } }
}, {
// 白字 - 透明背景 固定
'normal': { titleColor: '#FFFFFF;', bgColor: 'rgba(255, 255, 255, 0);', iconBack: './image/back-3.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } },
'scroll': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 0);', iconBack: './image/back-3.png', iconHome: '', logo: '', logoSize: { width: '', height: '' } }
}, {
// pages/home/home/home
'normal': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 0);', iconBack: '', iconHome: '', logo: './image/1-1.png', logoSize: { width: '200rpx', height: '60rpx' } },
'scroll': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 1);', iconBack: '', iconHome: '', logo: './image/1-2.png', logoSize: { width: '200rpx', height: '60rpx' } },
}, {
// pages/play/home/home
'normal': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 1);', iconBack: '', iconHome: '', logo: './image/2-1.png', logoSize: { width: '130rpx', height: '126rpx' } },
'scroll': { titleColor: '#000000;', bgColor: 'rgba(255, 255, 255, 1);', iconBack: '', iconHome: '', logo: './image/2-1.png', logoSize: { width: '130rpx', height: '126rpx' } },
}, {
// 白字 - 透明背景 转换 白字 - 藏青背景 - 1
'normal': { titleColor: '#FFFFFF;', bgColor: 'rgba(39, 39, 52, 0);', iconBack: './image/back-3.png', iconHome: '', logo: '', logo: '', logoSize: { width: '', height: '' } },
'scroll': { titleColor: '#FFFFFF;', bgColor: 'rgba(39, 39, 52, 1);', iconBack: './image/back-3.png', iconHome: '', logo: '', logo: '', logoSize: { width: '', height: '' } },
}, {
// 白字 - 藏青背景 固定
'normal': { titleColor: '#FFFFFF;', bgColor: 'rgba(28, 28, 37, 1);', iconBack: './image/back-3.png', iconHome: '', logo: '', logo: '', logoSize: { width: '', height: '' } },
'scroll': { titleColor: '#FFFFFF;', bgColor: 'rgba(28, 28, 37, 1);', iconBack: './image/back-3.png', iconHome: '', logo: '', logo: '', logoSize: { width: '', height: '' } },
}, {
// 白字 - 透明背景 转换 白字 - 藏青背景 - 2
'normal': { titleColor: '#FFFFFF;', bgColor: 'rgba(28, 28, 37, 0);', iconBack: './image/back-3.png', iconHome: '', logo: '', logo: '', logoSize: { width: '', height: '' } },
'scroll': { titleColor: '#FFFFFF;', bgColor: 'rgba(28, 28, 37, 1);', iconBack: './image/back-3.png', iconHome: '', logo: '', logo: '', logoSize: { width: '', height: '' } },
},
]
let output = function () {
let funcNormal = []
let fcunScroll = []
for (let i = 0, l = styleOption.length; i < l; i++) {
funcNormal.push(styleOption[i].normal)
fcunScroll.push(styleOption[i].scroll)
}
return { 'normal': funcNormal, 'scroll': fcunScroll }
}
export default output
\ No newline at end of file
......@@ -104,7 +104,6 @@ Page({
},
success: function(res) {
let funcData = res.data.list
console.log(funcData)
that.setData({
childActivity: funcData
})
......
const App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
let App = getApp()
Page({
data: {
......@@ -27,22 +22,6 @@ Page({
shopRecommendD: [], // 底部第二商店推荐
banner: [],
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '',
color: 'rgba(255, 255, 255, 0)',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '200rpx',
},
navigationScroll: 0,
},
onLoad: function (option) {
......@@ -508,20 +487,14 @@ Page({
hotline: false,
})
},
onPageScroll: function(funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function() {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
/**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function (funcEvent) {
App.pageScroll(funcEvent, this)
},
})
\ No newline at end of file
<navigation class="navigation" titleText="服务" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<m-nav titleText="服务" scrollHeight="{{navScroll}}" styleIndex="{{2}}" isOccupy="{{false}}" iconBack=""></m-nav>
<view class="container">
<block wx:if="{{!appStatus}}">
......
......@@ -21,7 +21,6 @@ Page({
sideBar: [], // 侧边菜单
sideBarHeight: [], // 分类商品起始高度
sideBarTopPadding: 0,
sideBarIndex: 0,
commoditScroll: 0,
......@@ -30,8 +29,6 @@ Page({
shoppingCart: [], // 购物车列表
shoppingCartTotal: 0, // 购物车总数
winToast: false,
winLoading: false,
winCommodityDetail: false,
},
......@@ -40,7 +37,6 @@ Page({
option: option
})
this.setSideBarStyle()
this.resetShoppingCart()
},
......@@ -60,12 +56,6 @@ Page({
}
},
setSideBarStyle: function () {
this.setData({
sideBarTopPadding: wx.getStorageSync('navigationStatusHeight') + wx.getStorageSync('navigationCapsuleHeight')
})
},
/**
* 添加动画初始
* @function
......@@ -202,9 +192,12 @@ Page({
* @returns
*/
queryCommodity: function () {
this.setData({
winLoading: true
App.ui.showToast({
iconType: 'loading',
title: '加载中...',
duration: 30000
})
App.wxRequest({
url: '/api/v1/commodity/getCommoditys',
data: {
......@@ -307,11 +300,12 @@ Page({
}
this.setData({
winLoading: false,
sideBar: funcSideBarId,
commodityList: funcList,
})
App.ui.hideToast()
// 获取商品分类高度,用于判断滚动位置自动选择标签
const funcQuery = wx.createSelectorQuery()
funcQuery.selectAll('.menu-list-title').boundingClientRect()
......@@ -471,7 +465,6 @@ Page({
let funcShoppingCart = this.data.shoppingCart
let funcWinToastNothing = false
// 详情加入购物车按钮商品数据不会存在于 event 对象中,所以要区分
let funcWinToast = true
let funcItem = event.currentTarget.dataset.item
......@@ -488,7 +481,11 @@ Page({
if (funcShoppingCart[i].quantity < funcShoppingCart[i].quantityMax) {
funcShoppingCart[i].quantity = funcShoppingCart[i].quantity + 1
} else {
funcWinToastNothing = true
App.ui.showToast({
iconType: 'error',
title: '没有更多商品了',
duration: 500
})
funcWinToast = false
}
break
......@@ -512,11 +509,17 @@ Page({
this.setData({
shoppingCart: funcShoppingCart,
winToast: funcWinToast,
winToastNothing: funcWinToastNothing,
winCommodityDetail: false,
})
if (funcWinToast) {
App.ui.showToast({
iconType: 'success',
title: '添加购物车成功',
duration: 500
})
}
// 重新计算购物车数量
this.selectionTotal()
},
......
<l-toast
l-image-class="toast-image"
l-class="toast-bg"
show="{{winToast}}"
image="/image/success.png"
title="添加购物车成功"
duration="400"
></l-toast>
<l-toast show="{{winToastNothing}}" icon="error" title="没有更多商品了" duration="400"></l-toast>
<l-toast
show="{{winLoading}}"
icon="loading"
title="加载中"
duration="20000"
mask="{{true}}"
></l-toast>
<navigation class="navigation" titleText="{{shopInfo.name}}" background="#FFFFFF;" backIcon="/image/back.png"></navigation>
<m-toast></m-toast>
<m-nav titleText="{{shopInfo.name}}"></m-nav>
<view class="row">
<!-- 侧边菜单 -->
<scroll-view class="side-bar" scroll-y style="{{'padding-top: ' + sideBarTopPadding + 'px;'}}">
<scroll-view class="side-bar" scroll-y>
<block wx:for="{{sideBar}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="menu-item {{sideBarIndex === index ? 'active' : ''}}" data-index="{{index}}" bindtap="onSelectionSideBar">
<text>{{item.tab}}</text>
......@@ -30,7 +12,7 @@
</scroll-view>
<!-- 商品列表 -->
<scroll-view class="menu-list" scroll-y style="{{'padding-top: ' + sideBarTopPadding + 'px;'}}" scroll-top="{{commoditScroll}}" bindscroll="onCommoditScroll">
<scroll-view class="menu-list" scroll-y scroll-top="{{commoditScroll}}" bindscroll="onCommoditScroll">
<block wx:for="{{commodityList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<!-- 此处类名关联 js 逻辑标签高度判定,需要统一修改 -->
<view class="menu-list-title">{{item.tab}}</view>
......@@ -40,8 +22,8 @@
<view class="commodity-item row" data-item="{{itemCommodity}}" bind:tap="onCommodityDetail">
<view class="item-img">
<!-- 暂时屏蔽图片下载 -->
<image src="{{itemCommodity.cover}}" mode="aspectFill"></image>
<!-- <image src="" mode="aspectFill"></image> -->
<!-- <image src="{{itemCommodity.cover}}" mode="aspectFill"></image> -->
<image src="" mode="aspectFill"></image>
</view>
<view class="item-info">
<view class="item-info-title">{{itemCommodity.name}}</view>
......
......@@ -2,14 +2,6 @@ page {
overflow: hidden;
}
.navigation {
z-index: 1100;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.side-bar {
width: 160rpx;
height: 100vh;
......@@ -80,7 +72,8 @@ page {
background-color: #fff;
}
.cart-img-wrap {
.cart-img-wrap,
.cart-img-wrap > image {
width: 48rpx;
height: 48rpx;
}
......@@ -341,29 +334,12 @@ page {
border-radius: 50%;
}
.popup-close {
.popup-close,
.popup-close > image {
width: 40rpx;
height: 40rpx;
}
.toast-bg {
min-width: 262rpx !important;
min-height: 262prx !important;
}
.toast-image {
z-index: 1900;
}
image {
width: 100%;
height: 100%;
}
/* 商品详情样式 */
.banner {
position: relative;
......
......@@ -60,7 +60,7 @@ Page({
navbarTitle: '儿童营地入园购票',
banner: 'service/detail-banner-3.png',
bgColor: '#F6DADA',
buyText: '暂未开售',
buyText: '购买门票',
unitText: '/人',
commodityList: []
})
......@@ -334,7 +334,7 @@ Page({
* @returns
*/
onBuy: function (event) {
if (this.data.shopInfo.appId === 3) return
// if (this.data.shopInfo.appId === 3) return
if (this.data.shopInfo.appId === 7) {
this.onCommodityDetail(event)
......
......@@ -16,7 +16,6 @@ Page({
amountPay: 0, // 支付金额
amountDiscount: 0, // 优惠金额
winToast: false,
isIphoneX: '', //判断是否为iphonex
sideBarTopPadding: 0,
......@@ -300,8 +299,10 @@ Page({
// 检查购物车是否拥有商品
let funcShoppingCart = this.data.shoppingCart
if (funcShoppingCart.length === 0) {
this.setData({
winToast: true
App.ui.showToast({
iconType: 'error',
title: '请选购商品后结算',
duration: 30000
})
return
}
......@@ -314,8 +315,10 @@ Page({
}
}
if (!funcIsSelection) {
this.setData({
winToast: true
App.ui.showToast({
iconType: 'error',
title: '请选购商品后结算',
duration: 30000
})
return
}
......
<navigation class="navigation" titleText="购物车" background="#FFFFFF;" backIcon="/image/back.png"></navigation>
<l-toast show="{{winToast}}" icon="error" title="请选购商品后结算"></l-toast>
<m-toast></m-toast>
<m-nav titleText="购物车"></m-nav>
<view class="container" wx:if="{{shoppingCart.length > 0}}" style="{{'margin-top: ' + sideBarTopPadding + 'px;'}}">
<view class="shop-info row con-b align-c">
......
const app = getApp()
const App = getApp()
Page({
data: {
navScroll: 0,
notice: {},
// 接口参数
id: '',
......@@ -17,7 +18,7 @@ Page({
// 最新动态详情
getNoticeDetail() {
var that = this
app.wxRequest({
App.wxRequest({
url: '/api/v1/dynamic/getDetail',
data: { id: that.data.id },
success: function (res) {
......@@ -36,5 +37,16 @@ Page({
})
}
})
}
},
/**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function (funcEvent) {
App.pageScroll(funcEvent, this)
},
})
\ No newline at end of file
<m-nav titleText="动态详情"></m-nav>
<m-nav titleText="动态详情" scrollHeight="{{navScroll}}" changeHeight="10rpx"></m-nav>
<view class="container">
<view class="title row con-s">
......
......@@ -10,6 +10,8 @@ Page({
imageBase: App.globalData.appImageBase,
resourcesBase: App.globalData.appResourcesBase,
navScroll: 0,
appointmentDate: '',
appointmentEndDate: '',
appointmentComplete: false,
......@@ -34,18 +36,17 @@ Page({
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/icon/arrow-l-2.png',
backiconType: '/image/icon/arrow-l-2.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/icon/arrow-l-1.png',
backiconType: '/image/icon/arrow-l-1.png',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '200rpx',
},
navigationScroll: 0,
},
onLoad: function (options) {
......@@ -240,13 +241,10 @@ Page({
if (!this.inspectForm()) {
return
}
wx.lin.showToast({
icon: 'loading',
App.ui.showToast({
iconType: 'loading',
title: '提交中',
show: true,
mask: true,
duration: 1000 * 60,
duration: 60000,
})
App.wxRequest({
url: '/api/v1/subscribe/doSubscribe',
......@@ -258,10 +256,9 @@ Page({
type: 0,
},
success: (res) => {
if (res.data && res.data.code == 500) {
wx.lin.showToast({
image: '/image/error.png',
App.ui.showToast({
iconType: 'error',
title: res.data.msg,
})
......@@ -269,13 +266,12 @@ Page({
this.setData({
appointmentComplete: true,
})
wx.lin.hideToast()
App.ui.hideToast()
}
},
fail: (err) => {
wx.lin.showToast({
image: '/image/error.png',
App.ui.showToast({
iconType: 'error',
title: err.msg,
})
}
......@@ -320,20 +316,14 @@ Page({
console.log(d) //格式为---Sat Feb 16 2019 08:00:00 GMT+0800 (中国标准时间)
return App.modular.miment(new Date(d)).format("YYYY-MM-DD") //格式为"2019-02-16 00:00:00"
},
onPageScroll: function(funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function() {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
/**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function (funcEvent) {
App.pageScroll(funcEvent, this)
},
})
\ No newline at end of file
<l-toast l-image-class="toast-image"></l-toast>
<!-- 首页 - 入园预约 / 房屋预约 -->
<navigation class="navigation" titleText="夜间入园预约" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<m-toast></m-toast>
<m-nav titleText="夜间入园预约" scrollHeight="{{navScroll}}" changeHeight="10rpx" styleIndex="{{2}}" isOccupy="{{false}}"></m-nav>
<view class="appointment-complete row con-c align-c" wx:if="{{appointmentComplete}}">
<view class="appointment-complete-tip">
......
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
/* 预约完成 */
.appointment-complete {
z-index: 1900;
......
const App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
let App = getApp()
Page({
data: {
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back.png',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '600rpx',
},
navigationScroll: 0,
// banner 列表数据
banner: [],
bannerIndex: 0,
......@@ -156,20 +135,13 @@ Page({
})
},
/**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function (funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
App.pageScroll(funcEvent, this)
},
})
\ No newline at end of file
<navigation class="navigation" titleText="主题活动" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<m-nav titleText="主题活动" scrollHeight="{{navScroll}}" changeHeight="50rpx" styleIndex="{{2}}" isOccupy="{{false}}"></m-nav>
<view class="container">
<view id="banner" class="banner">
......
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.navigation-bar-image {
z-index: 1100;
position: fixed;
top: 60rpx;
left: 50rpx;
width: 200rpx;
height: 60rpx;
}
.banner {
z-index: 9;
z-index: 1;
position: relative;
width: 750rpx;
height: 800rpx;
......@@ -40,7 +23,7 @@
}
.banner-wave {
z-index: 1100;
z-index: 2;
position: relative;
top: 740rpx;
left: 0;
......
......@@ -8,9 +8,11 @@ let logicData = {
Page({
data: {
imageBase: App.globalData.appImageBase,
navScroll: 0,
navHeight: 0,
classHeight: 0,
statusTop: '',
statusFixed: false,
statusActive: 0,
statusList: [
{
......@@ -18,19 +20,17 @@ Page({
name: '全部'
}
],
navigationTitle: '主题活动',
activity: [],
selectedActivity: [],
other: [],
selectedOther: [],
shopInfo: {},
options: {}
options: {},
},
onLoad: function (options) {
if (options.fromPage === 'serviceDetail') {
let shopInfo = wx.getStorageSync('shopInfoBuffer')
console.log(shopInfo)
this.setData({
options: options,
shopInfo: shopInfo
......@@ -39,31 +39,19 @@ Page({
this.getActivityList(1)
this.getActivityList(0)
this.setData({
statusTop: wx.getStorageSync('navigationStatusHeight') + wx.getStorageSync('navigationCapsuleHeight') - 40 + 'rpx'
navHeight: wx.getStorageSync('navStatusHeight') + wx.getStorageSync('navTitleHeight'),
classHeight: 94 * wx.getStorageSync('unitProportion')
})
},
/**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function (funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
if (funcEvent.scrollTop > 10) {
this.setData({
statusFixed: true,
statusTop: wx.getStorageSync('navigationStatusHeight') + wx.getStorageSync('navigationCapsuleHeight') + 'px'
})
} else {
this.setData({
statusFixed: false,
statusTop: wx.getStorageSync('navigationStatusHeight') + wx.getStorageSync('navigationCapsuleHeight') - 40 + 'rpx'
})
}
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
App.pageScroll(funcEvent, this)
},
//主题活动列表 type 1 近期 0 往期
......@@ -84,7 +72,6 @@ Page({
success: function (res) {
let tmpArr = [];
let funcData = res.data.list
console.log(funcData)
funcData.forEach(item => {
let tmpItem = {
id: item.id,
......
<!-- 畅玩 - 活动列表 -->
<navigation class="navigation" titleText="{{navigationTitle}}" background="#ffffff" backIcon="/image/back.png"></navigation>
<m-nav titleText="主题活动" scrollHeight="{{navScroll}}" styleIndex="{{1}}"></m-nav>
<view class="container con-s">
<!-- 活动类别 -->
<view class="status row align-c {{statusFixed ? 'status-fixed' : ''}}" style="{{statusFixed ? 'top: ' + (statusTop) : 'margin-top: ' + (statusTop)}}" wx:if="{{!options.fromPage}}">
<block wx:for="{{statusList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="status-item row con-c align-c" data-index="{{index}}" bindtap="onSelectionStatus">
<view class="row con-c align-c {{index === statusActive ? 'status-item-active' : ''}}">
<text>{{item.name}}</text>
</view>
<view class="status row align-c" style="{{'top: ' + navHeight + 'px'}}" wx:if="{{!options.fromPage}}">
<block wx:for="{{statusList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="status-item row con-c align-c" data-index="{{index}}" bindtap="onSelectionStatus">
<view class="row con-c align-c {{index === statusActive ? 'status-item-active' : ''}}">
<text>{{item.name}}</text>
</view>
</block>
</view>
</view>
</block>
</view>
<view class="container con-s" style="{{'margin-top: ' + classHeight + 'px;'}}">
<block wx:if="{{activity.length > 0}}">
<view class="list">
<block wx:for="{{selectedActivity}}" wx:for-index="index" wx:for-item="item" wx:key="index">
......
.navigation {
position: fixed;
top: 0;
left: 0;
}
.container {
min-height: 100vh;
margin-top: 120rpx;
padding-bottom: 100rpx;
background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 6%, #F3F4F6 100%);
}
/* 状态筛选菜单 */
.status {
z-index: 2;
position: fixed;
left: 0;
width: 750rpx;
padding: 0 40rpx;
border-bottom: 0.5px #e2e7ef solid;
......@@ -22,12 +17,6 @@
background-color: #fff;
}
.status-fixed {
z-index: 999;
position: fixed;
left: 0;
}
.status-item {
height: 94rpx;
margin-right: 80rpx;
......
......@@ -280,8 +280,6 @@ Page({
this.setData({
touristRouteList: funcTouristRouteList
})
console.log(this.data.touristRouteList)
},
fail: (err) => {
......
let App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({
data: {
bannerIndex: 0,
......@@ -14,43 +9,22 @@ Page({
statusList: [],
movieInfo: {},
showList: {},
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back-w.png',
color: '#ffffff',
background: 'rgba(28, 28, 37, 1)'
},
scroll: '200rpx',
},
navigationScroll: 0,
},
onLoad: function (options) {
let activityId = options.id
this.queryDetail(activityId)
},
/**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function (funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
App.pageScroll(funcEvent, this)
},
// 选择标签页日期
onSelectionStatus: function (event) {
console.log(event.currentTarget.dataset.type)
......
<navigation class="navigation" titleText="{{movieInfo.filmName}}" color="#ffffff" backIcon="/image/back-w.png" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<m-nav titleText="{{movieInfo.filmName}}" scrollHeight="{{navScroll}}" changeHeight="50rpx" styleIndex="{{8}}" isOccupy="{{false}}"></m-nav>
<view class="container">
<!-- 顶部轮播图 -->
......
page {
background: #1C1C25;
}
.navigation {
z-index: 2000;
}
.banner {
z-index: 9;
z-index: 1;
position: relative;
width: 750rpx;
height: 814rpx;
......
let App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({
data: {
resourcesBase: App.globalData.appResourcesBase,
navHeight: 0,
classHeight: 0,
// 请求参数
queryParams: {
pageNo: '1',
......@@ -21,21 +21,6 @@ Page({
windowHeight: 0,
// 底部图片是否固定
footerFixed: true,
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back-w.png',
color: '#ffffff',
background: 'rgba(28, 28, 37, 1)'
},
scroll: '20rpx',
},
navigationScroll: 0,
statusActive: 0,
statusList: [{
......@@ -63,42 +48,26 @@ Page({
}
},
onLoad: function() {
let marginTop = wx.getStorageSync('navigationStatusHeight') + wx.getStorageSync('navigationCapsuleHeight') + 20
this.setData({
marginTop
navHeight: wx.getStorageSync('navStatusHeight') + wx.getStorageSync('navTitleHeight'),
classHeight: 60 * wx.getStorageSync('unitProportion')
})
this.setShowHeight()
this.setFooterLocation()
this.getTodayFilm()
// this.getAllFilm()
},
onPageScroll: function(funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
if (funcEvent.scrollTop > 20) {
this.setData({
statusFixed: true,
statusTop: wx.getStorageSync('navigationStatusHeight') + wx.getStorageSync('navigationCapsuleHeight') + 'px'
})
} else {
this.setData({
statusFixed: false,
})
}
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function() {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
/**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function (funcEvent) {
App.pageScroll(funcEvent, this)
},
setShowHeight: function() {
wx.getSystemInfo({
success: (result) => {
......
<navigation class="navigation" titleText="所有影片" color="#ffffff" backIcon="/image/back-w.png" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<m-nav titleText="所有影片" scrollHeight="{{navScroll}}" changeHeight="50rpx" styleIndex="{{7}}"></m-nav>
<view id="page" class="contaniner con-s" style="margin-top: {{marginTop + 'px'}}">
<view class="status row align-c {{statusFixed ? 'status-fixed' : ''}}" style="{{statusFixed ? 'top: ' + (statusTop) : ''}}">
<block wx:for="{{statusList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="status-item row con-c align-c" data-type="{{index}}" bindtap="onSelectionStatus">
<view class="row con-c align-c {{index === statusActive ? 'status-item-active' : ''}}">
<text>{{item.name}}</text>
</view>
<view class="status row align-c" style="{{'top: ' + navHeight + 'px'}}">
<block wx:for="{{statusList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="status-item row con-c align-c" data-type="{{index}}" bindtap="onSelectionStatus">
<view class="row con-c align-c {{index === statusActive ? 'status-item-active' : ''}}">
<text>{{item.name}}</text>
</view>
</block>
</view>
</view>
</block>
</view>
<view id="page" class="contaniner con-s" style="{{'margin-top: ' + (navHeight + classHeight) + 'px;'}}">
<view wx:if="{{statusActive === 0}}">
<block wx:for="{{movieToday}}" wx:key="index" wx:if="{{movieToday.length !== 0}}">
<view class="movie-wrapper row" bindtap="onToMovieDetail" data-movieId="{{item.activityId}}">
......
page {
background-color: #1C1C25;
}
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.navigation-bar-image {
z-index: 1100;
position: fixed;
top: 60rpx;
left: 50rpx;
width: 200rpx;
height: 60rpx;
}
/* .contaniner {
margin-top: 200rpx;
} */
/* 状态筛选菜单 */
.status-fixed {
z-index: 999;
.status {
z-index: 2;
position: fixed;
left: 0;
}
.status {
width: 750rpx;
height: 72rpx;
height: 120rpx;
background-color: #1C1C25;
border-bottom: 1rpx #3A3A40 solid;
}
.status-item {
flex: 1;
height: 72rpx;
height: 120rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
color: #959DA9;
}
.status-item-active {
height: 72rpx;
height: 120rpx;
color: #fff;
font-weight: 600;
border-bottom: 4rpx #fff solid;
......@@ -169,7 +150,6 @@ page {
.movie-week {
width: 100%;
height: 44rpx;
margin-top: 54rpx;
color: #C2C7CF;
font-size: 22rpx;
text-align: center;
......
......@@ -230,19 +230,25 @@ Page({
success: (result) => {
this.setData({
showPopup: false,
winToastSuccess: true
})
App.ui.showToast({
'title': '图片已保存',
'iconType': 'success',
})
},
fail: (error) => {
this.setData({
winToastFail: true
App.ui.showToast({
'title': '图片保存失败',
'iconType': 'error',
})
}
})
},
fail: (error) => {
this.setData({
winToastFail: true
App.ui.showToast({
'title': '图片保存失败',
'iconType': 'error',
})
}
})
......
<l-toast
l-class="toast"
l-image-class="toast-icon"
show="{{winToastSuccess}}"
image="../../../image/icon/success-3.png"
title="图片已保存"
duration="3000"
></l-toast>
<l-toast
l-class="toast"
l-image-class="toast-icon"
show="{{winToastFail}}"
image="../../../image/icon/war-3.png"
title="图片保存失败"
duration="3000"
></l-toast>
<navigation class="navigation" titleText="{{info.title}}" color="#ffffff" backIcon="/image/back-w.png"></navigation>
<m-toast></m-toast>
<m-nav titleText="{{info.title}}" scrollHeight="{{navScroll}}" changeHeight="50rpx" styleIndex="{{2}}" isOccupy="{{false}}"></m-nav>
<view class="container">
<view id="banner" class="banner">
......
......@@ -19,16 +19,8 @@ page {
height: 88rpx !important;
}
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.banner {
z-index: 9;
z-index: 1;
position: relative;
width: 750rpx;
height: 880rpx;
......@@ -42,14 +34,14 @@ page {
}
.banner-swiper-point {
z-index: 1900;
z-index: 2;
position: relative;
bottom: 110rpx;
left: 0;
}
.banner-wave {
z-index: 1100;
z-index: 2;
position: relative;
bottom: 60rpx;
left: 0;
......@@ -125,7 +117,7 @@ page {
/* 分享弹窗 */
.container-share {
z-index: 1700;
z-index: 7;
position: fixed;
top: 0;
left: 0;
......
let App = getApp()
let logicData = {
option: {},
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({
data: {
appStatus: App.globalData.appStatus,
imageBase: App.globalData.appImageBase,
resourcesBase: App.globalData.appResourcesBase,
navScroll: 0,
option: {},
// 弹出控制
showPopup: false,
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back.png',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '200rpx',
},
navigationStyleBlack: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: '#272734'
},
scroll: '600rpx',
},
navigationScroll: 0,
// 内容类型
contentType: 'detail',
......@@ -738,21 +702,15 @@ Page({
url: '/pages/commodity/menu-food/menu-food'
})
},
onPageScroll: function(funcEvent) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
this.setSideButton(funcEvent)
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function() {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
/**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function (funcEvent) {
App.pageScroll(funcEvent, this)
},
/**
......
<navigation class="navigation" titleText="{{info.title}}" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<m-nav titleText="{{info.title}}" scrollHeight="{{navScroll}}" changeHeight="50rpx" styleIndex="{{option.id !== '2' ? 2 : 6}}" isOccupy="{{false}}"></m-nav>
<view class="container" wx:if="{{option.id !== '2'}}">
<view id="banner" class="banner">
......
.navigation {
z-index: 1900;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.navigation-bar-image {
z-index: 1100;
position: fixed;
top: 60rpx;
left: 50rpx;
width: 200rpx;
height: 60rpx;
}
.movie {
color: #fff;
background-color: #1c1c25;
}
.banner {
z-index: 9;
z-index: 1;
position: relative;
width: 750rpx;
height: 800rpx;
......@@ -43,7 +26,7 @@
}
.banner-wave {
z-index: 1100;
z-index: 2;
position: relative;
top: 740rpx;
left: 0;
......@@ -115,9 +98,8 @@
}
/* 侧边返回顶部 */
.appointment-side {
z-index: 1900;
z-index: 4;
position: fixed;
right: 40rpx;
bottom: 268rpx;
......@@ -542,9 +524,8 @@
}
/* 分享弹窗 */
.container-share {
z-index: 1700;
z-index: 1;
position: fixed;
top: 0;
left: 0;
......@@ -871,9 +852,8 @@
}
/* 评论相册样式 */
.full-screen-album {
z-index: 2000;
z-index: 9;
position: fixed;
top: 0;
left: 0;
......
<navigation class="navigation" titleText="{{navTitle}}" background="#FFFFFF" backIcon="/image/icon/arrow-l-1.png"></navigation>
<m-nav titleText="{{navTitle}}" scrollHeight="{{navScroll}}" changeHeight="10rpx" styleIndex="{{1}}"></m-nav>
<view class="container">
<view class="detail">
......
.navigation {
z-index: 1900;
}
.container {
margin-top: 120rpx;
padding-bottom: 20rpx;
background: linear-gradient(182deg, #fff 0%, #ebeff7 100%);
}
/* 详情 */
.detail {
width: 750rpx;
min-height: 500rpx;
......@@ -23,7 +17,6 @@
}
/* 商店详情 */
.shop-item {
position: relative;
width: 750rpx;
......
const App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({
data: {
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back-w.png',
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back.png',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '750rpx',
},
navigationScroll: 0,
isNavigationWhite: false,
appStatus: App.globalData.appStatus,
......@@ -156,20 +134,14 @@ Page({
}
},
/**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function (funcEvent) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
App.pageScroll(funcEvent, this)
},
/**
......@@ -183,43 +155,4 @@ Page({
bannerIndex: event.detail.current
})
},
/**
* 页面滚动事件
* @function
* @param
* @returns
*/
eventPageScroll: function (event) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
if (event.scrollTop > 40 && !this.data.isNavigationWhite) {
this.setData({
isNavigationWhite: true
})
wx.setNavigationBarColor({
frontColor: '#000000',
backgroundColor: '#000000',
})
}
if (event.scrollTop <= 40) {
this.setData({
isNavigationWhite: false
})
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ffffff',
})
}
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 40)
},
})
\ No newline at end of file
<navigation class="navigation" titleText="攻略详情" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<m-nav titleText="攻略详情" scrollHeight="{{navScroll}}" changeHeight="50rpx" styleIndex="{{2}}" isOccupy="{{false}}"></m-nav>
<view class="container">
<view id="banner" class="banner">
<swiper class="banner-swiper" autoplay circular interval="2000" duration="500" indicator-color="rgba(0, 0, 0, 0)" indicator-active-color="rgba(0, 0, 0, 0)" bindchange="eventPageScroll">
<swiper class="banner-swiper" autoplay circular interval="2000" duration="500" indicator-color="rgba(0, 0, 0, 0)" indicator-active-color="rgba(0, 0, 0, 0)" bindchange="eventSwiperChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item class="banner-swiper-item">
<image class="banner-swiper-image" src="{{item}}"></image>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment