Skip to content

严立 / mini-shimao

Go to a project
Commit 5a51e80b by 严立
Options

LL - 增加自定义组件，页面调整。4

parent af169284
Expand all
Inline Side-by-side
Showing with 768 additions and 258 deletions
app.js
import mui from './component/m-init.js'
import iBase64 from './npm/base64.js'
import iMiment from './npm/miment.js'
import iUtils from './utils/utils.js'
......@@ -33,6 +35,7 @@ App({
},
onLaunch: function () {
mui(this)
this.setUnitProportion()
this.login()
......@@ -412,4 +415,16 @@ App({
return funcInfo
},
// s3 新增函数
pageScroll: function (funcEvent, funcPage) {
// 优化滚动事件触发频率
let funcNow = new Date().getTime()
if (funcNow - this.scrollTimestamp < 40) return
this.scrollTimestamp = funcNow
funcPage.setData({
navScroll: funcEvent.scrollTop
})
},
})
\ No newline at end of file
app.json
......@@ -57,6 +57,12 @@
"pages/login/login"
],
"usingComponents": {
"m-nav": "./component/m-nav/m-nav",
"m-toast": "./component/m-toast/m-toast",
"m-dialog": "./component/m-dialog/m-dialog",
"navigation": "./component/navigation/navigation",
"swiper-point": "./component/swiper-point/swiper-point",
"strategy-item": "./component/strategy-item/strategy-item",
......
app.wxss
@import '/wxss/samcss-reset.wxss';
@import '/wxss/samcss-layout.wxss';
@import '/wxss/samcss-theme.wxss';
\ No newline at end of file
@import '/wxss/samcss-theme.wxss';
/* s3组件样式 */
@import './component/theme/reset.wxss';
@import './component/theme/layout.wxss';
@import './component/theme/theme.wxss';
\ No newline at end of file
component/Tips/Tips.js deleted 100644 → 0
// components/Tips/Tips.js
Component({
properties: {
text: {
type: String,
value: ''
}
},
})
component/Tips/Tips.wxml deleted 100644 → 0
<view class="tips">
<view class="tips-img"><image src="/image/fail-glod.png" mode="widthFix"></image></view>
<view class="tips-text">{{text}}</view>
</view>
component/Tips/Tips.wxss deleted 100644 → 0
.tips {
height: 72rpx;
display: flex;
align-items: center;
padding: 0 36rpx;
background-color: #F5EEDF;
}
.tips-img {
width: 32rpx;
height: 32rpx;
}
.tips-text {
margin-left: 12rpx;
font-size: 22rpx;
color: #837048;
}
\ No newline at end of file
component/m-dialog/m-dialog.js 0 → 100644
let App = getApp()
Component({
options: {
styleIsolation: 'apply-shared'
},
properties: {
},
data: {
// tip - 提示框，alert - 提示框，confirm - 对话框
type: 'alert',
title: '提示',
content: '这里是提示信息',
cancel: '取消',
confirm: '确定',
success: function () {},
fail: function () {},
winDialog: false,
},
// 生命周期
lifetimes: {
attached: function () {
App.ui.dialog = this
},
},
methods: {
onCancel: function () {
this.data.fail()
App.ui.hideDialog()
},
onConfirm: function () {
this.data.success()
App.ui.hideDialog()
},
}
})
component/Tips/Tips.json → component/m-dialog/m-dialog.json
{
"component": true,
"usingComponents": {}
"component": true,
"usingComponents": {}
}
\ No newline at end of file
component/m-dialog/m-dialog.wxml 0 → 100644
<view class="m-dialog row cc ac" hidden="{{!winDialog}}">
<!-- 提示框 - 仅标题，确定按钮 -->
<block wx:if="{{type === 'tip'}}">
<view class="container-dialog column cb dialog-tip">
<view class="dialog-title row cc ac">
<text class="regular">{{title}}</text>
</view>
<view class="dialog-operation row cb ac">
<button class="row cb ac-confirm" bindtap="onConfirm">
<text class="secondary">{{confirm}}</text>
</button>
</view>
</view>
</block>
<!-- 提示框 - 标题和内容，确定按钮 -->
<block wx:if="{{type === 'alert'}}">
<view class="container-dialog column cb">
<view class="dialog-title row cc ac">
<text class="regular">{{title}}</text>
</view>
<view class="dialog-content row cc">
<text class="secondary">{{content}}</text>
</view>
<view class="dialog-operation row cb ac">
<button class="row cb ac-confirm secondary" bindtap="onConfirm">{{confirm}}</button>
</view>
</view>
</block>
<!-- 对话框 - 标题和内容，取消确定按钮 -->
<block wx:if="{{type === 'confirm'}}">
<view class="container-dialog column cb">
<view class="dialog-title row cc ac">
<text class="regular">{{title}}</text>
</view>
<view class="dialog-content row cc">
<text class="secondary">{{content}}</text>
</view>
<view class="dialog-operation row cb ac border-base">
<button class="dialog-operation-cancel row cc ac secondary" bindtap="onCancel">{{cancel}}</button>
<view class="dialog-operation-line row cc ac border-base"></view>
<button class="dialog-operation-confirm row cc ac primary" bindtap="onConfirm">{{confirm}}</button>
</view>
</view>
</block>
</view>
\ No newline at end of file
component/m-dialog/m-dialog.wxss 0 → 100644
.m-dialog {
z-index: 7;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .75);
}
.container-dialog {
width: 590rpx;
height: 308rpx;
padding-top: 48rpx;
border-radius: 4px;
background: #FFFFFF;
overflow: hidden;
}
/* 特定弹窗类型样式 */
.dialog-tip .dialog-title {
flex-grow: 1;
padding-bottom: 48rpx;
}
.dialog-title {
height: 48rpx;
font-size: 34rpx;
font-weight: 800;
line-height: 48rpx;
}
.dialog-content {
height: 92rpx;
margin-top: 24rpx;
}
/* 操作按钮 */
.dialog-operation {
border-style: solid none none none;
border-width: 1px;
}
.dialog-operation-line {
width: 1px;
height: 32rpx;
border-style: none solid none solid;
border-width: .5px;
}
.dialog-operation-cancel {
width: 295rpx;
height: 94rpx;
background: #FFFFFF;
font-size: 30rpx;
font-weight: 400;
line-height: 42rpx;
}
.dialog-operation-confirm {
width: 295rpx;
height: 94rpx;
background: #FFFFFF;
font-size: 30rpx;
font-weight: 400;
line-height: 42rpx;
}
\ No newline at end of file
component/m-init.js 0 → 100644
let App
/**
* toast 组件显示函数
* @function
* @param {object} - funcOption，显示配置
* @returns
*/
function showToast (funcOption) {
if (JSON.stringify(funcOption) === '{}') {
console.log('[m-ui] function "showToast" param is invalid')
return
}
// 如果传参包含 duration 数值，使用该数值。
// 删除该属性是为了不污染 toast 组件中的默认值。
let funcToastDuration = App.ui.toast.data.duration
if (funcOption.duration) {
funcToastDuration = funcOption.duration
delete funcOption.duration
}
funcOption = Object.assign(App.ui.toast.data, funcOption)
funcOption.winToast = true
console.log('showToast', funcOption)
App.ui.toast.setData(funcOption)
// 设置 toast 关闭时间
App.ui.toastTimer = setTimeout(() => {
App.ui.hideToast()
}, funcToastDuration)
}
/**
* toast 组件隐藏函数
* @function
* @param
* @returns
*/
function hideToast () {
App.ui.toast.setData({
iconUrl: '',
iconType: '',
title: '',
background: 'rgba(0, 0, 0, 0)',
winIcon: true,
winTitle: true,
winToast: false,
})
clearTimeout(App.ui.toastTimer)
}
/**
* dialog 组件显示函数
* @function
* @param {object} - funcOption，显示配置
* @returns
*/
function showDialog (funcOption) {
if (JSON.stringify(funcOption) === '{}') {
console.log('[m-ui] function "showDialog" param is invalid')
return
}
funcOption = Object.assign(App.ui.dialog.data, funcOption)
funcOption.winDialog = true
App.ui.dialog.setData(funcOption)
}
/**
* dialog 组件隐藏函数
* @function
* @param
* @returns
*/
function hideDialog () {
App.ui.dialog.setData({
type: 'alert',
title: '提示',
content: '这里是提示信息',
cancel: '取消',
confirm: '确定',
success: function () {},
fail: function () {},
winDialog: false,
})
}
let output = function (funcApp) {
App = funcApp
App.ui = {
// 暴露全局函数
showToast: showToast,
hideToast: hideToast,
showDialog: showDialog,
hideDialog: hideDialog,
// 内部属性
toast: {}, // toast 组件实例
toastTimer: 0, // toast 隐藏计时器
dialog: {}, // dialog 组件实例
}
}
export default output
\ No newline at end of file
component/m-input/m-input.js 0 → 100644
Component({
options: {
styleIsolation: 'apply-shared'
},
properties: {
value: {
type: String,
value: ''
}
},
data: {
inputFocus: false,
winText: true,
winInput: false,
},
methods: {
onInput: function (event) {
console.log(event.detail.value)
this.setData({
value: event.detail.value
})
},
onInputFocus: function() {
console.log('onInputFocus')
},
onInputBlur: function() {
console.log('onInputBlur')
this.setInputHidden()
},
onInputConfirm: function() {
console.log('onInputConfirm')
this.setInputHidden()
},
setInputShow: function() {
this.setData({
winText: false,
winInput: true,
})
let funcTimer = setTimeout(() => {
this.setData({
inputFocus: true,
})
}, 20)
},
setInputHidden: function() {
console.log('setInputHidden')
this.setData({
inputFocus: false,
winText: true,
winInput: false,
})
},
}
})
\ No newline at end of file
component/m-input/m-input.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
component/m-input/m-input.wxml 0 → 100644
<view class="z-input">
<view class="container-text row ac" hidden="{{!winText}}" bindtap="setInputShow">
<text>{{value}}</text>
</view>
<view class="container-input row ac" hidden="{{!winInput}}">
<input
value="{{value}}"
focus="{{inputFocus}}"
bindinput="onInput"
bindfocus="onInputFocus"
bindblur="onInputBlur"
bindconfirm="onInputConfirm"
></input>
</view>
</view>
\ No newline at end of file
component/m-input/m-input.wxss 0 → 100644
.z-input {
position: relative;
}
.container-text {
width: 400rpx;
height: 80rpx;
border: 1px green solid;
}
.container-input {
width: 400rpx;
height: 80rpx;
border: 1px red solid;
}
\ No newline at end of file
component/m-nav/m-nav.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
component/m-nav/m-nav.wxml 0 → 100644
<view class="m-nav {{isFixed ? 'm-nav-fixed' : ''}}">
<!-- 状态栏 -->
<view class="m-status" style="{{statusCss}}"></view>
<!-- 标题栏 -->
<view class="m-title row cc ac" style="{{titleCss}}">
<view class="m-title-logo" wx:if="{{winLogo}}" style="{{logoCss}}">
<image class="m-title-logo-image" src="{{currentStyle.logo}}" style="{{logoImageCss}}"></image>
</view>
<!-- 返回，主页按钮 -->
<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>
</view>
<view class="row cc ac" wx:if="{{titleText && !titleImg}}">
<text class="m-title-text">{{titleText}}</text>
</view>
</view>
</view>
<!-- logo 超出导航栏时的补充背景元素 -->
<view class="m-nav-logo-fill" wx:if="{{winLogoFill}}" style="{{logoFillCss}}"></view>
<!-- 导航栏占位元素 -->
<view wx:if="{{isOccupy && isFixed}}" class="m-nav-occupy" style="{{navOccupyCss}}"></view>
\ No newline at end of file
component/m-nav/m-nav.wxss 0 → 100644
.m-nav {
z-index: 6;
width: 750rpx;
}
.m-nav-fixed {
position: fixed;
top: 0;
left: 0;
}
.m-status,
.m-title {
width: 750rpx;
}
.m-nav-occupy {
z-index: 5;
width: 750rpx;
}
.m-title {
position: relative;
}
.m-title-operation {
position: absolute;
top: 0;
left: 30rpx;
}
.m-title-operation-back,
.m-title-operation-home {
display: block;
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
.m-title-logo {
position: absolute;
top: 0;
left: 30rpx;
}
.m-title-text {
white-space: nowrap;
font-size: 34rpx;
font-weight: 500;
}
/* logo 填充元素 */
.m-nav-logo-fill {
z-index: 5;
width: 750rpx;
}
\ No newline at end of file
component/m-toast/m-toast.js 0 → 100644
let App = getApp()
Component({
options: {
styleIsolation: 'apply-shared'
},
properties: {
},
data: {
iconUrl: '', // 自定义图标路径，最高优先级，会覆盖 iconType 的值。
iconType: '', // 预定义图标样式。success，warning，error，loading。
title: '', // 提示文本
duration: 3000, // 提示的延迟时间
background: 'rgba(0, 0, 0, 0)',
winIcon: true,
winTitle: true,
winToast: false,
},
// 生命周期
lifetimes: {
attached: function () {
App.ui.toast = this
},
},
// 自定方法
methods: {
}
})
component/m-toast/m-toast.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
component/m-toast/m-toast.wxml 0 → 100644
<view class="toast row cc ac" hidden="{{!winToast}}" style="{{'background: ' + background + ';'}}">
<!-- 图标 toast -->
<view class="toast-container column cc ac" wx:if="{{winIcon && !winTitle}}">
<image class="toast-icon" wx:if="{{iconUrl}}" src="{{iconUrl}}"></image>
<image class="toast-icon" wx:if="{{iconType === 'error'}}" src="./image/error.png"></image>
<image class="toast-icon" wx:if="{{iconType === 'success'}}" src="./image/success.png"></image>
<image class="toast-icon" wx:if="{{iconType === 'warning'}}" src="./image/warning.png"></image>
<image class="toast-icon" wx:if="{{iconType === 'loading'}}" src="./image/loading.gif"></image>
</view>
<!-- 文本 toast -->
<view class="toast-container column cc ac" wx:if="{{!winIcon && winTitle}}">
<text class="toast-content">{{title}}</text>
</view>
<!-- 混合 toast -->
<view class="toast-container column cb ac" wx:if="{{winIcon && winTitle}}">
<image class="toast-icon" wx:if="{{iconUrl}}" src="{{iconUrl}}"></image>
<image class="toast-icon" wx:if="{{iconType === 'error'}}" src="./image/error.png"></image>
<image class="toast-icon" wx:if="{{iconType === 'success'}}" src="./image/success.png"></image>
<image class="toast-icon" wx:if="{{iconType === 'warning'}}" src="./image/warning.png"></image>
<image class="toast-icon" wx:if="{{iconType === 'loading'}}" src="./image/loading.gif"></image>
<text class="toast-content">{{title}}</text>
</view>
</view>
\ No newline at end of file
component/m-toast/m-toast.wxss 0 → 100644
.toast {
z-index: 7;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
height: 100%;
}
.toast-container {
width: 262rpx;
height: 262rpx;
padding: 54rpx 0 40rpx 0;
box-shadow: 0 0 68rpx 0 rgba(0, 0, 0, .16);
border-radius: 4px;
background: #1F252E;
}
.toast-icon {
width: 88rpx;
height: 88rpx;
}
.toast-content {
height: 36rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
color: #FFFFFF;
}
\ No newline at end of file
component/theme/layout.wxss 0 → 100644
/* 层级说明
0 - 背景
1 - 视图
2 - 视图
3 - 视图
4 - 视图
5 - 导航栏，占位元素
6 - 导航栏
7 - 遮罩，弹窗，提示，
8 - 遮罩
9 - 遮罩
*/
.row {
display: flex;
flex-direction: row;
}
.column {
display: flex;
flex-direction: column;
}
.cs {
justify-content: flex-start;
}
.cc {
justify-content: center;
}
.ce {
justify-content: flex-end;
}
.cb {
justify-content: space-between;
}
.ca {
justify-content: space-around;
}
.as {
align-items: flex-start;
}
.ac {
align-items: center;
}
.ae {
align-items: flex-end;
}
\ No newline at end of file
component/theme/reset.wxss 0 → 100644
view,
text,
input,
image,
canvas,
button,
picker,
picker-view,
scroll-view,
textarea {
margin: 0;
padding: 0;
box-sizing: border-box;
}
button::after {
border: none;
}
\ No newline at end of file
component/theme/theme.wxss 0 → 100644
/* 主题 */
.primary {
color: #5DB5DD;
}
/* 成功 */
.success {
color: #67C23A;
}
/* 警告 */
.warning {
color: #E6A23C;
}
/* 危险 */
.danger {
color: #F56C6C;
}
/* 提示 */
.info {
color: #909399;
}
/* 常规文本，用于标题，正文 */
.regular {
color: #15191F;
}
/* 次要文本，用于说明，补充，提示 */
.secondary {
color: #959DA9;
}
/* 输入提示 */
.placeholder {
color: #C2C7CF;
}
/* 基础边框 */
.border-base {
border-color: #E2E7EF;
}
/* 明亮边框 */
.border-light {
border-color: #E4E7ED;
}
/* 最亮边框 */
.border-lighter {
border-color: #EBEEF5;
}
\ No newline at end of file
pages/commodity/shopping-cart/shopping-cart.json
{
"usingComponents": {
"Tips": "../../../component/Tips/Tips"
}
"usingComponents": {}
}
\ No newline at end of file
pages/home/dynamic-detail/dynamic-detail.wxml
<!-- 首页 - 通知 - 通知详情 -->
<navigation class="navigation" titleText="动态详情" background="#ffffff" backIcon="/image/back.png"></navigation>
<m-nav titleText="动态详情"></m-nav>
<view class="container">
<view class="title row con-s">
......@@ -8,9 +7,6 @@
<view class="date row con-s">
<text>{{notice.date}}</text>
</view>
<!-- <view class="cover" wx:if="{{notice.cover !== ''}}">
<image src="{{notice.cover}}" mode="widthFix"></image>
</view> -->
<view class="describe">
<parser html="{{notice.describe}}"/>
</view>
......
pages/home/dynamic-detail/dynamic-detail.wxss
.navigation {
position: fixed;
top: 0;
left: 0;
}
.container {
margin-top: 120rpx;
}
.title {
width: 670rpx;
margin-top: 60rpx;
......
pages/home/dynamic/dynamic.wxml
<navigation class="navigation" titleText="最新动态" background="#ffffff" backIcon="/image/back.png"></navigation>
<m-nav titleText="最新动态"></m-nav>
<view class="container">
<view class="title row con-b align-e">
......
pages/home/dynamic/dynamic.wxss
.navigation {
position: fixed;
top: 0;
left: 0;
}
.container {
margin-top: 120rpx;
}
.title {
width: 750rpx;
height: 150rpx;
......
pages/home/guide/guide.js
......@@ -21,7 +21,6 @@ Page({
isSave: false,
winDialog: false,
},
onLoad: function (options) {
......@@ -272,30 +271,33 @@ Page({
onSaveMap: function () {
if (this.data.isSave) {
wx.lin.showToast({
icon: 'success',
App.ui.showToast({
iconType: 'success',
title: '地图已保存至相册',
show: true,
mask: true
})
return
}
this.setData({
winDialog: true
App.ui.showDialog({
type: 'confirm',
title: '是否保存完整地图？',
content: '保存后可在手机相册中查看',
cancel: '取消',
confirm: '保存',
success: () => {
console.log('success')
this.onSaveMapConfirm()
},
fail: () => {
console.log('fail')
},
})
},
onSaveMapConfirm: function () {
this.setData({
winDialog: false
})
wx.lin.showToast({
icon: 'loading',
App.ui.showToast({
iconType: 'loading',
title: '正在下载...',
show: true,
mask: true,
duration: 20000,
})
......@@ -306,40 +308,28 @@ Page({
wx.saveImageToPhotosAlbum({
filePath: result.tempFilePath,
success: (result) => {
wx.lin.showToast({
icon: 'success',
App.ui.showToast({
iconType: 'success',
title: '地图已保存至相册',
show: true,
mask: true
})
this.setData({
isSave: true
})
},
fail: (error) => {
wx.lin.showToast({
icon: 'error',
App.ui.showToast({
iconType: 'error',
title: '地图已保存失败',
show: true,
mask: true
})
}
})
},
fail: (error) => {
wx.lin.showToast({
icon: 'error',
App.ui.showToast({
iconType: 'error',
title: '地图下载失败',
show: true,
mask: true
})
}
})
},
onSaveMapCancel: function () {
this.setData({
winDialog: false
})
},
})
\ No newline at end of file
pages/home/guide/guide.wxml
<l-toast l-bg-class="dialog-bg"></l-toast>
<l-dialog
l-bg-class="dialog-bg"
show="{{winDialog}}"
type="confirm"
title="是否保存完整地图？"
title-color="#000000"
content="保存后可在手机相册中查看"
confirm-text="保存"
confirm-color="#5DB5DD"
cancel-text="取消"
cancel-color="#656E7B"
bind:linconfirm="onSaveMapConfirm"
bind:lincancel="onSaveMapCancel"
>
</l-dialog>
<m-toast></m-toast>
<m-dialog></m-dialog>
<m-nav titleText="智慧导览" isOccupy="{{false}}"></m-nav>
<!-- 畅玩 - 活动列表 -->
<navigation class="navigation" titleText="智慧导览" backIcon="/image/back.png"></navigation>
<!-- <navigation class="navigation" titleText="智慧导览" backIcon="/image/back.png"></navigation> -->
<scroll-view class="guide" scroll-x scroll-left="{{selectionPoint}}">
<image id="guide-map" src="{{resourcesBase + 'guide/guide.png'}}" style="{{mapCss}}"></image>
......
pages/home/guide/guide.wxss
.navigation {
z-index: 1100;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
/* 景点地图 */
.guide {
position: fixed;
......
pages/home/history/history.js
let App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({
data: {
// 导航栏相关属性
navigationStyle: {
normal: {
backIcon: '/image/back.png',
color: '#000000',
background: 'rgba(255, 255, 255, 0)'
},
change: {
backIcon: '/image/back.png',
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '100rpx',
},
navigationScroll: 0,
sideBarTopMargin: 0,
navScroll: 0,
history: {}
},
onLoad: function (options) {
let { index } = options
this.setSideBarStyle()
this.getBrands(index)
},
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)
},
// 获取导航栏高度
setSideBarStyle: function () {
this.setData({
sideBarTopMargin: wx.getStorageSync('navigationStatusHeight') + wx.getStorageSync('navigationCapsuleHeight') + 16
})
/**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function (funcEvent) {
App.pageScroll(funcEvent, this)
},
getBrands: function (index) {
App.wxRequest({
url: '/api/v1/common/getBrands',
......
pages/home/history/history.wxml
<navigation class="navigation" titleText="{{history.name}}" backIcon="/image/back.png" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<m-nav titleText="{{history.name}}" scrollHeight="{{navScroll}}" styleIndex="{{1}}"></m-nav>
<view class="container" style="{{'margin-top: ' + sideBarTopMargin + 'px;'}}">
<view class="container">
<block wx:for="{{history.content}}" wx:key="index">
<image mode="widthFix" src="{{item}}"></image>
</block>
......
pages/home/home/home.js
const App = getApp()
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({
data: {
imageBase: App.globalData.appImageBase,
......@@ -24,9 +19,7 @@ Page({
},
scroll: '600rpx',
},
navigationScroll: 0,
navigationLogoTop: 0,
isNavigationLogoWhite: true,
navScroll: 0,
// banner 列表数据
banner: [],
......@@ -59,7 +52,6 @@ Page({
},
onLoad: function (options) {
this.setNavigationLogo()
this.setLogin()
},
onShow: function() {
......@@ -91,12 +83,6 @@ Page({
}
},
setNavigationLogo: function () {
this.setData({
navigationLogoTop: App.modular.utils.navigationElementCenterMarginTop(60)
})
},
onGuide: function () {
wx.navigateTo({
url: '/pages/home/guide/guide'
......@@ -156,35 +142,8 @@ Page({
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function(funcEvent) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
if (funcEvent.scrollTop >= this.data.bannerHeight) {
if (this.data.isNavigationLogoWhite) {
this.setData({
isNavigationLogoWhite: false,
})
}
}
if (funcEvent.scrollTop < this.data.bannerHeight && !this.data.isNavigationLogoWhite) {
this.setData({
isNavigationLogoWhite: true,
navigationScroll: funcEvent.scrollTop
})
}
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 40)
onPageScroll: function (funcEvent) {
App.pageScroll(funcEvent, this)
},
bannerClick(e) {
......
pages/home/home/home.wxml
<navigation class="navigation" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<m-nav scrollHeight="{{navScroll}}" changeHeight="650rpx" styleIndex="{{4}}" isOccupy="{{false}}"></m-nav>
<view class="container">
<image class="logo" src="/image/logo-w.png" hidden="{{!isNavigationLogoWhite}}" style="{{'top: ' + navigationLogoTop + 'px'}}"></image>
<image class="logo" src="/image/logo-b.png" hidden="{{isNavigationLogoWhite}}" style="{{'top: ' + navigationLogoTop + 'px'}}"></image>
<view id="banner" class="banner">
<swiper autoplay circular class="banner-swiper" indicator-dots="{{false}}" interval="5000" duration="500" bindchange="onSwiperChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
......
pages/home/home/home.wxss
.navigation {
z-index: 1100;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
}
.logo {
z-index: 1100;
position: fixed;
......@@ -22,7 +14,7 @@
.banner {
z-index: 9;
z-index: 1;
position: relative;
width: 750rpx;
height: 870rpx;
......@@ -46,7 +38,7 @@
}
.banner-wave {
z-index: 1100;
z-index: 2;
position: relative;
top: 712rpx;
left: 0;
......@@ -60,7 +52,7 @@
}
.banner-notice {
z-index: 1100;
z-index: 3;
position: relative;
top: 620rpx;
left: 40rpx;
......
pages/play/home/home.wxml
<navigation class="navigation" background="#FFFFFF"></navigation>
<m-nav scrollHeight="{{navScroll}}" changeHeight="650rpx" styleIndex="{{5}}"></m-nav>
<view class="container">
<image class="logo" src="./image/title.png" style="{{'top: ' + navigationLogoTop + 'px'}}"></image>
<view class="logo-minor row align-c" style="{{'top: ' + (navigationLogoMarginTop - 2) + 'px; background: #FFFFFF'}}">
<image src="./image/title-minor.png"></image>
</view>
<!-- 畅玩分类 -->
<block wx:if="{{appStatus}}">
<view class="banner" style="{{'margin-top: ' + (navigationLogoTop + navigationLogoMarginTop + 40) + 'rpx;'}}">
......
pages/play/home/home.wxss
......@@ -13,31 +13,6 @@
font-size: 26rpx;
}
/* 顶部标题 */
.logo {
z-index: 1900;
position: fixed;
top: 60rpx;
left: 50rpx;
width: 130rpx;
height: 50rpx;
}
.logo-minor {
z-index: 1900;
position: fixed;
top: 60rpx;
left: 0;
width: 750rpx;
height: 24rpx;
padding: 0 50rpx;
}
.logo-minor image {
width: 130rpx;
height: 20rpx;
}
/* 畅玩分类 */
.banner-occupy {
position: relative;
......
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