Skip to content

严立 / mini-shimao

Go to a project
Commit 92c2bff9 by 严立
Options

LL - 标题栏-地图

parent 832cc023
Inline Side-by-side
Showing with 372 additions and 125 deletions
app.js
......@@ -30,6 +30,17 @@ App({
wx.setStorageSync('unitProportion', funcProportion)
},
cssObjectToCssString: function (funcCssObject) {
let funcCss = ''
let funcObjectKey = Object.keys(funcCssObject)
for (let i = 0, l = funcObjectKey.length; i < l; i++) {
funcCss = funcCss + funcObjectKey[i] + ': ' + funcCssObject[funcObjectKey[i]] + '; '
}
// console.log(funcCss)
return funcCss
},
wxRequest(obj) {
let that = this
var token = that.globalData.token
......@@ -42,9 +53,9 @@ App({
method: obj.method || "POST",
header: header,
success: function (res) {
console.log("接口:", that.globalData.baseUrl + obj.url);
console.log("参数:", JSON.stringify(obj.data));
console.log("返回:", res);
// console.log("接口:", that.globalData.baseUrl + obj.url);
// console.log("参数:", JSON.stringify(obj.data));
// console.log("返回:", res);
let code = res.data.code * 1;
if (200 == code && true == res.data.success) {
......
app.json
......@@ -37,6 +37,7 @@
"l-button": "../miniprogram_npm/lin-ui/button/index",
"l-card": "../miniprogram_npm/lin-ui/card/index",
"l-capsule-bar": "../miniprogram_npm/lin-ui/capsule-bar/index",
"l-dialog": "../miniprogram_npm/lin-ui/dialog/index",
"l-icon": "../miniprogram_npm/lin-ui/icon/index",
"l-list": "../miniprogram_npm/lin-ui/list/index",
"l-price": "../miniprogram_npm/lin-ui/price/index",
......
component/navigation/navigation.js
let App = getApp()
Component({
/**
* 组件的属性列表
*/
// 组件外部属性
properties: {
background: {
type: String,
......@@ -9,7 +9,7 @@ Component({
},
color: {
type: String,
value: 'rgba(0, 0, 0, 1)'
value: '#000000'
},
titleText: {
type: String,
......@@ -29,88 +29,215 @@ Component({
},
fontSize: {
type: Number,
value: 16
value: 34
},
iconWidth: {
type: Number,
value: 58
},
iconHeight: {
type: Number,
value: 19
},
iconWidth: {
type:Number,
value: 58
},
// 标题栏滚动指定位置动态变换颜色属性
// 优先级高于 background 属性
// {
// normal: {
// text: 'rgba(255, 255, 255, 1)',
// background: 'rgba(255, 255, 255, 0)'
// },
// change: {
// text: 'rgba(0, 0, 0, 1)',
// background: 'rgba(255, 255, 255, 1)'
// },
// scroll: '4%',
// }
scrollStyle: {
type: Object,
value: {},
},
observers: {
'background': function () {
this.setStyle()
// 当前页面滚动高度
// 配合动态变换颜色属性使用
scrollHeight: {
type: Number,
value: 0
},
},
// 组件内部属性
data: {
statusHeight: 0,
titleHeight: 0,
statusCss: '',
titleCss: '',
textCss: '',
iconCss: '',
isScrollChange: false,
},
// 生命周期
lifetimes: {
attached: function(){
var that = this
that.setNavSize()
that.setStyle()
attached: function () {
this.setNavigationHeight()
this.setNavigationStyle()
},
},
data: {
// 属性监听
observers: {
'background': function () {
this.setNavigationStyle()
},
'scrollHeight': function () {
console.log('this.data.scrollHeight', this.data.scrollHeight)
this.eventScroll(this.data.scrollHeight)
},
},
// 自定方法
methods: {
// 通过获取系统信息计算导航栏高度
setNavSize: function() {
var that = this
let sysinfo = wx.getSystemInfoSync()
let statusHeight = sysinfo.statusBarHeight
let isIOS = sysinfo.system.indexOf('iOS') > -1
let navHeight
if (isIOS) {
navHeight = 44;
/**
* 设置标题栏高度
* @function
* @param
* @returns
*/
setNavigationHeight: function () {
console.log('setNavigationHeight', this.data.titleText)
let funcIsIOS = wx.getSystemInfoSync().system.indexOf('iOS') > -1
let funcStatusHeight = wx.getSystemInfoSync().statusBarHeight
let funcTitleHeight = 0
if (funcIsIOS) {
funcTitleHeight = 44
} else {
navHeight = 48;
funcTitleHeight = 48
}
this.setData({
statusHeight: funcStatusHeight,
titleHeight: funcTitleHeight,
})
// 缓存标题栏高度信息
wx.setStorageSync('navigationStatusHeight', this.data.statusHeight)
wx.setStorageSync('navigationCapsuleHeight', this.data.titleHeight)
},
/**
* 设置标题栏样式
* @function
* @param
* @returns
*/
setNavigationStyle: function () {
console.log('setNavigationStyle')
let funcStatusStyle = {
'height': this.data.statusHeight + 'px',
'background': this.data.background,
'color': this.data.color,
}
let funcTitleStyle = {
'height': this.data.titleHeight + 'px',
'background': this.data.background,
}
that.setData({
status: statusHeight,
navHeight: navHeight
if (Object.keys(this.data.scrollStyle).length) {
funcStatusStyle['background'] = this.data.isScrollChange ? this.data.scrollStyle.change.background : this.data.scrollStyle.normal.background
funcTitleStyle['background'] = this.data.isScrollChange ? this.data.scrollStyle.change.background : this.data.scrollStyle.normal.background
this.setData({
backIcon: this.data.isScrollChange ? this.data.scrollStyle.change.backIcon : this.data.scrollStyle.normal.backIcon
})
}
let funcTextStyle = {
'font-size': this.data.fontSize + 'rpx',
'color': this.data.color,
}
let funcIconStyle = {
'width': this.data.iconWidth + 'px',
'height': this.data.iconHeight + 'px',
}
wx.setStorageSync('navigationStatusHeight', this.data.status)
wx.setStorageSync('navigationCapsuleHeight', this.data.navHeight)
},
setStyle: function() {
var that = this, containerStyle, textStyle, iconStyle;
containerStyle = [
'background:' + that.data.background
].join(';');
textStyle = [
'color:' + that.data.color,
'font-size:' + that.data.fontSize + 'px'
].join(';');
iconStyle = [
'width: ' + that.data.iconWidth + 'px',
'height: ' + that.data.iconHeight + 'px'
].join(';');
that.setData({
containerStyle: containerStyle,
textStyle: textStyle,
iconStyle: iconStyle
this.setData({
statusCss: App.cssObjectToCssString(funcStatusStyle),
titleCss: App.cssObjectToCssString(funcTitleStyle),
textCss: App.cssObjectToCssString(funcTextStyle),
iconCss: App.cssObjectToCssString(funcIconStyle),
})
},
// 返回事件
back: function(){
/**
* 返回按钮事件
* @function
* @param
* @returns
*/
onBack: function () {
wx.navigateBack({
delta: 1
})
this.triggerEvent('back', {back: 1})
this.triggerEvent('back', { back: 1 })
},
home: function() {
/**
* 主页按钮事件
* @function
* @param
* @returns
*/
onHome: function () {
this.triggerEvent('home', {});
},
/**
* 滚动事件
* @function
* @param
* @returns
*/
eventScroll: function (funcScrollHeight) {
// 如果没有定义动态变换参数则无视滚动事件
if (Object.keys(this.data.scrollStyle).length === 0) return
let funcChangeHeight = 0
if (/^[0-9.]+%$/.test(this.data.scrollStyle.scroll)) {
console.log('[component navigation] scrollStyle type error')
return
}
if (/^[0-9.]+(px)?$/.test(this.data.scrollStyle.scroll)) {
funcChangeHeight = Number(this.data.scrollStyle.scroll.replace('px', ''))
}
if (/^[0-9.]+rpx$/.test(this.data.scrollStyle.scroll)) {
funcChangeHeight = Number(this.data.scrollStyle.scroll.replace('rpx', '')) * wx.getSystemInfoSync().windowWidth / 750
}
if (funcScrollHeight <= funcChangeHeight) {
this.setData({
color: this.data.scrollStyle.normal.color,
background: this.data.scrollStyle.normal.background,
isScrollChange: false
})
}
if (funcChangeHeight < funcScrollHeight) {
this.setData({
color: this.data.scrollStyle.change.color,
background: this.data.scrollStyle.change.background,
isScrollChange: true
})
}
},
}
})
\ No newline at end of file
component/navigation/navigation.wxml
<view class='nav' style='height: {{status + navHeight}}px'>
<view id="status" class='status' style='height: {{status}}px;{{containerStyle}}'></view>
<view id="navbar" class='navbar' style='height:{{navHeight}}px;{{containerStyle}}'>
<view class='back-icon' wx:if="{{backIcon}}" bindtap='back'>
<view class="navigation">
<!-- 状态栏 -->
<view id="status" class='status' style="{{statusCss}}"></view>
<!-- 标题栏 -->
<view id="navbar" class='title' style="{{titleCss}}">
<view class='back-icon' wx:if="{{backIcon}}" bindtap='onBack'>
<image src='{{backIcon}}'></image>
</view>
<view class='home-icon' wx:if="{{homeIcon}}" bindtap='home'>
<view class='home-icon' wx:if="{{homeIcon}}" bindtap='onHome'>
<image src='{{homeIcon}}'></image>
</view>
<view class='nav-icon' wx:if="{{titleImg}}">
<image src='{{titleImg}}' style='{{iconStyle}}'></image>
<view class='title-icon' wx:if="{{titleImg}}">
<image src='{{titleImg}}' style='{{iconCss}}'></image>
</view>
<view class='nav-title' wx:if="{{titleText && !titleImg}}">
<text style='{{textStyle}}'>{{titleText}}</text>
<view class='title-text' style="{{titleCss}}" wx:if="{{titleText && !titleImg}}">
<text style='{{textCss}}'>{{titleText}}</text>
</view>
</view>
</view>
\ No newline at end of file
component/navigation/navigation.wxss
.nav {
.navigation {
z-index: 2000;
}
.status {
background: red;
width: 750rpx;
}
.navbar {
background: green;
.title {
position: relative;
}
.navbar{
position: relative
}
.back-icon, .home-icon{
.back-icon,
.home-icon {
z-index: 1900;
width: 28px;
height: 100%;
position: absolute;
......@@ -21,27 +20,40 @@
top: 50%;
display: flex;
}
.back-icon{
.back-icon {
left: 16px;
}
.home-icon{
.home-icon {
left: 44px
}
.back-icon image{
.back-icon image {
width: 28px;
height: 28px;
margin: auto;
}
.home-icon image{
.home-icon image {
width: 20px;
height: 20px;
margin: auto;
}
.nav-title, .nav-icon{
.title-icon {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.title-text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
font-size: 0;
width: 750rpx;
font-weight: bold;
}
\ No newline at end of file
pages/activity-detail/activity-detail.wxss
......@@ -50,6 +50,7 @@
}
.banner-wave image {
display: block;
width: 750rpx;
height: 60rpx;
}
......
pages/appointment/appointment.js
......@@ -3,6 +3,8 @@ const app = getApp()
Page({
data: {
navigationTitle: '123213231',
formType: 1,
appointmentDate: '',
appointmentEndDate: '',
......@@ -26,7 +28,8 @@ Page({
onLoad: function (options) {
this.setData({
formType: Number(options.type)
formType: Number(options.type),
navigationTitle: Number(options.type) === 1 ? '夜间入园预约' : '看房预约'
})
this.setReset()
},
......
pages/appointment/appointment.wxml
<l-toast l-image-class="toast-image"></l-toast>
<!-- 首页 - 入园预约 / 房屋预约 -->
<navigation class="navigation" backIcon="/image/back-w.png"></navigation>
<navigation class="navigation" titleText="{{navigationTitle}}" color="#FFFFFF" backIcon="/image/back-w.png"></navigation>
<view class="appointment-complete row con-c align-c" wx:if="{{appointmentComplete}}">
<view class="appointment-complete-tip">
......
pages/guide/guide.js
......@@ -15,6 +15,7 @@ Page({
selectionPoint: 0,
isSave: false,
winDialog: false,
},
onLoad: function (options) {
......@@ -217,14 +218,26 @@ Page({
icon: 'success',
title: '地图已保存至相册',
show: true,
mask: true
})
return
}
this.setData({
winDialog: true
})
},
onSaveMapConfirm: function () {
this.setData({
winDialog: false
})
wx.lin.showToast({
icon: 'loading',
title: '正在下载...',
show: true,
mask: true,
duration: 20000,
})
......@@ -235,21 +248,40 @@ Page({
wx.saveImageToPhotosAlbum({
filePath: result.tempFilePath,
success: (result) => {
wx.lin.hideToast()
wx.lin.showToast({
icon: 'success',
title: '地图已保存至相册',
show: true,
mask: true
})
this.setData({
isSave: true
})
},
fail: (error) => {
console.log(error)
wx.lin.hideToast()
wx.lin.showToast({
icon: 'error',
title: '地图已保存失败',
show: true,
mask: true
})
}
})
},
fail: (error) => {
console.log(error)
wx.lin.hideToast()
wx.lin.showToast({
icon: 'error',
title: '地图下载失败',
show: true,
mask: true
})
}
})
},
onSaveMapCancel: function () {
this.setData({
winDialog: false
})
},
})
\ No newline at end of file
pages/guide/guide.wxml
<l-toast></l-toast>
<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="#000000"
cancel-text="取消"
cancel-color="#000000"
bind:linconfirm="onSaveMapConfirm"
bind:lincancel="onSaveMapCancel"
>
</l-dialog>
<!-- 畅玩 - 活动列表 -->
<navigation class="navigation" titleText="智慧导览" backIcon="/image/back.png"></navigation>
......@@ -35,3 +50,4 @@
<view class="save-map row con-c align-c" bindtap="onSaveMap">
<text>保存完整地图</text>
</view>
pages/guide/guide.wxss
......@@ -95,3 +95,7 @@
color: #FFFFFF;
}
.dialog-bg {
background: rgba(0, 0, 0, .6) !important;
}
\ No newline at end of file
pages/home/home.js
......@@ -10,9 +10,19 @@ let logicData = {
Page({
data: {
// 导航栏相关属性
navigationStyle: {
normal: {
color: '#FFFFFF',
background: 'rgba(255, 255, 255, 0)'
},
change: {
color: '#000000',
background: 'rgba(255, 255, 255, 1)'
},
scroll: '600rpx',
},
navigationScroll: 0,
navigationLogoTop: 0,
navigationAnimationShow: 0,
isNavigationLogoWhite: true,
// banner 列表数据
......@@ -234,20 +244,15 @@ Page({
if (funcEvent.scrollTop >= this.data.bannerHeight) {
if (this.data.isNavigationLogoWhite) {
this.setData({
isNavigationLogoWhite: false
isNavigationLogoWhite: false,
})
}
let funcOpacity = (funcEvent.scrollTop - this.data.bannerHeight) / 40
this.setData({
navigationAnimationShow: funcOpacity
})
}
if (funcEvent.scrollTop < this.data.bannerHeight && !this.data.isNavigationLogoWhite) {
this.setData({
isNavigationLogoWhite: true,
navigationAnimationShow: 0
navigationScroll: funcEvent.scrollTop
})
}
......
pages/home/home.wxml
<navigation class="navigation" background="{{'rgba(255, 255, 255, ' + navigationAnimationShow + ')'}}" scrollHeight="{{navigationScroll}}"></navigation>
<navigation class="navigation" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<view class="container">
<image class="logo" src="/image/logo-w.png" hidden="{{!isNavigationLogoWhite}}" style="{{'top: ' + navigationLogoTop + 'px'}}"></image>
......
pages/shop-detail/shop-detail.js
......@@ -8,6 +8,35 @@ let logicData = {
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',
},
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,
// banner 列表数据
banner: [],
bannerIndex: 0,
......@@ -173,16 +202,19 @@ Page({
onPageScroll: function (funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率
// if (logicData.pageScrollLock) return
// logicData.pageScrollLock = true
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)
// }, 20)
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 10)
},
/**
......@@ -192,10 +224,6 @@ Page({
* @returns
*/
setSideButton: function (funcEvent) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
if (funcEvent.scrollTop >= this.data.sideHeight) {
if (this.data.winSide) {
this.setData({
......@@ -215,12 +243,6 @@ Page({
navigationAnimationShow: 0
})
}
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 40)
},
onBackTop: function () {
......
pages/shop-detail/shop-detail.wxml
<!-- 畅玩 - 商店详情 -->
<navigation class="navigation" titleText="{{info.name}}" color="#ffffff" backIcon="/image/back-w.png"></navigation>
<navigation wx:if="{{!isBlack}}" class="navigation" titleText="{{info.name}}" color="#ffffff" scrollStyle="{{navigationStyle}}" scrollHeight="{{navigationScroll}}"></navigation>
<navigation wx:if="{{isBlack}}" class="navigation" titleText="{{info.name}}" color="#ffffff" scrollStyle="{{navigationStyleBlack}}" scrollHeight="{{navigationScroll}}"></navigation>
<view class="container">
<view id="banner" class="banner">
......
pages/strategy/strategy.wxml
......@@ -37,7 +37,7 @@
<text>文中提及</text>
</view>
<block wx:for="{{relation}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="relation-item row con-b" data-id="{{item.id}}" bindtap="shopDetail">
<view class="relation-item row con-b align-c" data-id="{{item.id}}" bindtap="shopDetail">
<image mode="widthFix" src="{{item.cover}}"></image>
<view class="relation-item-info col">
<text>{{item.title}}</text>
......@@ -45,7 +45,7 @@
<text>{{item.price}}</text>
</view>
<view class="relation-item-more row align-c">
<image src="/image/more.png"></image>
<image src="/image/more-g.png"></image>
</view>
</view>
</block>
......
pages/strategy/strategy.wxss
......@@ -95,6 +95,7 @@ rich-text {
left: 24rpx;
width: 176rpx;
height: 214rpx;
border-radius: 2px;
overflow: hidden;
}
......@@ -105,18 +106,21 @@ rich-text {
.relation-item-info text:nth-child(1) {
font-size: 30rpx;
font-weight: bold;
line-height: 42rpx;
color:rgba(21, 25, 31, 1);
}
.relation-item-info text:nth-child(2) {
margin-top: 30rpx;
font-size: 26rpx;
line-height: 36rpx;
color: #656E7B;
}
.relation-item-info text:nth-child(3) {
margin-top: 20rpx;
margin-top: 12rpx;
font-size: 26rpx;
line-height: 36rpx;
color: #656E7B;
}
......
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