Skip to content

严立 / mini-shimao

Go to a project
Commit db6977a7 by 严立
Options

UI细节优化

parent 4aa686d9
Inline Side-by-side
Showing with 447 additions and 135 deletions
app.js
App({ App({
onLaunch: function () { onLaunch: function () {
// console.log('wx.env', wx.env) this.setUnitProportion()
}, },
onShow: function (options) { onShow: function (options) {
...@@ -17,5 +17,10 @@ App({ ...@@ -17,5 +17,10 @@ App({
globalData: { globalData: {
} },
setUnitProportion: function () {
let funcProportion = wx.getSystemInfoSync().windowWidth / 750
wx.setStorageSync('unitProportion', funcProportion)
},
}) })
app.json
...@@ -29,11 +29,14 @@ ...@@ -29,11 +29,14 @@
"l-price": "../miniprogram_npm/lin-ui/price/index", "l-price": "../miniprogram_npm/lin-ui/price/index",
"l-tabs": "../miniprogram_npm/lin-ui/tabs/index", "l-tabs": "../miniprogram_npm/lin-ui/tabs/index",
"l-tabpanel": "../miniprogram_npm/lin-ui/tabpanel/index", "l-tabpanel": "../miniprogram_npm/lin-ui/tabpanel/index",
"l-toast": "../miniprogram_npm/lin-ui/toast/index",
"l-water-flow": "../miniprogram_npm/lin-ui/water-flow/index" "l-water-flow": "../miniprogram_npm/lin-ui/water-flow/index"
}, },
"window": { "window": {
"navigationStyle": "custom", "navigationStyle": "custom",
"backgroundTextStyle": "light", "navigationBarTextStyle": "white",
"backgroundColor": "#F2F2F2",
"backgroundTextStyle": "dark",
"enablePullDownRefresh": false "enablePullDownRefresh": false
}, },
"tabBar": { "tabBar": {
......
component/navigation/navigation.js
...@@ -60,27 +60,6 @@ Component({ ...@@ -60,27 +60,6 @@ Component({
}, },
methods: { methods: {
getHeight: function () {
let funcNavigationHeight = 0
let query = this.createSelectorQuery()
query.select('#status').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function (res) {
console.log('status', res[0].height)
funcNavigationHeight = funcNavigationHeight + res[0].height
})
query = this.createSelectorQuery()
query.select('#navbar').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function (res) {
console.log('navbar', res[0].height)
funcNavigationHeight = funcNavigationHeight + res[0].height
})
wx.setStorageSync('navigationHeight', funcNavigationHeight)
},
// 通过获取系统信息计算导航栏高度 // 通过获取系统信息计算导航栏高度
setNavSize: function() { setNavSize: function() {
var that = this var that = this
...@@ -99,9 +78,8 @@ Component({ ...@@ -99,9 +78,8 @@ Component({
navHeight: navHeight navHeight: navHeight
}) })
wx.setStorageSync('navigationHeight', this.data.status + this.data.navHeight) wx.setStorageSync('navigationStatusHeight', this.data.status)
console.log(wx.getStorageSync('navigationHeight')) wx.setStorageSync('navigationCapsuleHeight', this.data.navHeight)
that.getHeight()
}, },
setStyle: function() { setStyle: function() {
var that = this, containerStyle, textStyle, iconStyle; var that = this, containerStyle, textStyle, iconStyle;
......
image/add.png 0 → 100644
image/add.png

157 Bytes
image/cut.png 0 → 100644
image/cut.png

136 Bytes
image/strategy-0.png
image/strategy-0.png

7.95 KB | W: | H:

image/strategy-0.png

22.5 KB | W: | H:

image/strategy-0.png
image/strategy-0.png
image/strategy-0.png
image/strategy-0.png
  • 2-up
  • Swipe
  • Onion skin
image/strategy-1.png
image/strategy-1.png

8.2 KB | W: | H:

image/strategy-1.png

24.1 KB | W: | H:

image/strategy-1.png
image/strategy-1.png
image/strategy-1.png
image/strategy-1.png
  • 2-up
  • Swipe
  • Onion skin
image/strategy-2.png
image/strategy-2.png

7.56 KB | W: | H:

image/strategy-2.png

24.3 KB | W: | H:

image/strategy-2.png
image/strategy-2.png
image/strategy-2.png
image/strategy-2.png
  • 2-up
  • Swipe
  • Onion skin
image/top.png 0 → 100644
image/top.png

614 Bytes
pages/activity-entry/activity-entry.js
import iMiment from '../../npm/miment.js'
Page({ Page({
data: { data: {
formType: 1, formType: 1,
entryComplete: false, entryComplete: false,
formInto: {
name: '',
phone: '',
quantity: 0,
date: '',
},
}, },
onLoad: function (options) { onLoad: function (options) {
console.log(options)
this.setData({ this.setData({
formType: Number(options.type) formType: Number(options.type)
}) })
this.setReset()
},
setReset: function () {
let funcDate = iMiment(new Date().getTime()).format('YYYY-MM-DD')
let funcFormInto = {
name: '',
phone: '',
quantity: 0,
date: funcDate,
}
this.setData({
formInto: funcFormInto,
appointmentDate: funcDate,
})
},
onQuantityCut: function () {
let funcFormInto = this.data.formInto
if (0 < funcFormInto.quantity) {
funcFormInto.quantity = funcFormInto.quantity - 1
}
this.setData({
formInto: funcFormInto
})
},
onQuantityAdd: function () {
let funcFormInto = this.data.formInto
if (funcFormInto.quantity < 5) {
funcFormInto.quantity = funcFormInto.quantity + 1
} else {
wx.lin.showToast({
title: '每个账号最多预约5人',
icon: 'error',
})
}
this.setData({
formInto: funcFormInto
})
},
onSelectionDate: function (event) {
let funcFormInto = this.data.formInto
funcFormInto.date = event.detail.value
this.setData({
formInto: funcFormInto
})
}, },
onServic: function () { onServic: function () {
......
pages/activity-entry/activity-entry.wxml
<l-toast></l-toast>
<navigation class="navigation" titleText="活动报名" backIcon="/image/back.png"></navigation> <navigation class="navigation" titleText="活动报名" backIcon="/image/back.png"></navigation>
<view class="entry-complete row con-c align-c" wx:if="{{entryComplete}}"> <view class="entry-complete row con-c align-c" wx:if="{{entryComplete}}">
...@@ -33,7 +34,7 @@ ...@@ -33,7 +34,7 @@
<text space="ensp">姓 名</text> <text space="ensp">姓 名</text>
</view> </view>
<view class="input-wrap row align-c"> <view class="input-wrap row align-c">
<input class="weui-input" auto-focus placeholder-class="input-tip" placeholder="请输入名字"></input> <input class="weui-input" placeholder-class="input-tip" placeholder="请输入名字"></input>
</view> </view>
</view> </view>
<view class="row align-c"> <view class="row align-c">
...@@ -48,16 +49,25 @@ ...@@ -48,16 +49,25 @@
<view class="input-label row align-c"> <view class="input-label row align-c">
<text space="ensp">报名人数</text> <text space="ensp">报名人数</text>
</view> </view>
<view class="input-wrap row align-c"> <view class="input-wrap row con-b align-c">
<input class="weui-input"></input> <l-button special="{{true}}" bind:lintap="onQuantityCut">
<image class="input-icon" src="../../image/cut.png"></image>
</l-button>
<text>{{formInto.quantity}}</text>
<l-button special="{{true}}" bind:lintap="onQuantityAdd">
<image class="input-icon" src="../../image/add.png"></image>
</l-button>
</view> </view>
</view> </view>
<view class="row align-c"> <view class="row align-c">
<view class="input-label row align-c"> <view class="input-label row align-c">
<text space="ensp">报名时间</text> <text space="ensp">报名时间</text>
</view> </view>
<view class="input-wrap row align-c"> <view class="input-wrap row con-b align-c">
<input class="weui-input"></input> <picker class="input-picker" mode="date" value="{{date}}" start="{{appointmentDate}}" bindchange="onSelectionDate">
<view class="picker">{{formInto.date}}</view>
</picker>
<image class="input-icon" src="../../image/more.png"></image>
</view> </view>
</view> </view>
</view> </view>
......
pages/activity-entry/activity-entry.wxss
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
left: 88rpx; left: 88rpx;
width: 432rpx; width: 432rpx;
height: 80rpx; height: 80rpx;
border: 1rpx #15191f solid; border: 1px #15191f solid;
border-radius: 4rpx; border-radius: 4rpx;
color: #15191f; color: #15191f;
background: #fefcf9; background: #fefcf9;
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
height: 80rpx; height: 80rpx;
margin: 36rpx 0; margin: 36rpx 0;
padding: 0 24rpx; padding: 0 24rpx;
border: 1rpx #DBDFE5 solid; border: 1px #DBDFE5 solid;
border-radius: 4rpx; border-radius: 4rpx;
} }
...@@ -118,6 +118,15 @@ ...@@ -118,6 +118,15 @@
line-height: 32rpx; line-height: 32rpx;
} }
.input-icon {
width: 32rpx;
height: 32rpx;
}
.input-picker {
flex-grow: 1;
}
.quota { .quota {
position: relative; position: relative;
top: -20rpx; top: -20rpx;
......
pages/appointment/appointment.js
import iMiment from '../../npm/miment.js'
Page({ Page({
data: { data: {
formType: 1, formType: 1,
appointmentDate: '',
appointmentComplete: false, appointmentComplete: false,
formInto: {
name: '',
phone: '',
quantity: 0,
date: '',
},
formHouse: {
name: '',
phone: '',
date: '',
},
winQuota: false,
}, },
onLoad: function (options) { onLoad: function (options) {
console.log(options)
this.setData({ this.setData({
formType: Number(options.type) formType: Number(options.type)
}) })
this.setReset()
},
setReset: function () {
let funcDate = iMiment(new Date().getTime()).format('YYYY-MM-DD')
let funcFormInto = {
name: '',
phone: '',
quantity: 0,
date: funcDate,
}
let funcFormHouse = {
name: '',
phone: '',
date: funcDate,
}
this.setData({
formInto: funcFormInto,
formHouse: funcFormHouse,
appointmentDate: funcDate,
})
}, },
onServic: function () { onServic: function () {
wx.makePhoneCall({ wx.makePhoneCall({
phoneNumber: '18000000000' phoneNumber: '13856782234'
})
},
onQuantityCut: function () {
let funcFormInto = this.data.formInto
if (0 < funcFormInto.quantity) {
funcFormInto.quantity = funcFormInto.quantity - 1
}
this.setData({
formInto: funcFormInto
})
},
onQuantityAdd: function () {
let funcFormInto = this.data.formInto
if (funcFormInto.quantity < 5) {
funcFormInto.quantity = funcFormInto.quantity + 1
} else {
wx.lin.showToast({
title: '每个账号最多预约5人',
icon: 'error',
})
}
this.setData({
formInto: funcFormInto
})
},
onSelectionDate: function (event) {
let funcFormInto = this.data.formInto
let funcFormHouse = this.data.formHouse
funcFormInto.date = event.detail.value
funcFormHouse.date = event.detail.value
this.setData({
formInto: funcFormInto,
formHouse: funcFormHouse,
winQuota: true
}) })
}, },
...@@ -27,5 +105,8 @@ Page({ ...@@ -27,5 +105,8 @@ Page({
this.setData({ this.setData({
appointmentComplete: false, appointmentComplete: false,
}) })
wx.navigateBack({
delta: 1
})
}, },
}) })
\ No newline at end of file
pages/appointment/appointment.wxml
<l-toast></l-toast>
<navigation class="navigation" backIcon="/image/back-w.png"></navigation> <navigation class="navigation" backIcon="/image/back-w.png"></navigation>
<view class="appointment-complete row con-c align-c" wx:if="{{appointmentComplete}}"> <view class="appointment-complete row con-c align-c" wx:if="{{appointmentComplete}}">
...@@ -25,7 +26,7 @@ ...@@ -25,7 +26,7 @@
<text space="ensp">姓 名</text> <text space="ensp">姓 名</text>
</view> </view>
<view class="input-wrap row align-c"> <view class="input-wrap row align-c">
<input class="weui-input" auto-focus placeholder-class="input-tip" placeholder="请输入名字"></input> <input placeholder-class="input-tip" placeholder="请输入名字"></input>
</view> </view>
</view> </view>
<view class="row align-c"> <view class="row align-c">
...@@ -33,26 +34,35 @@ ...@@ -33,26 +34,35 @@
<text space="ensp">手 机 号</text> <text space="ensp">手 机 号</text>
</view> </view>
<view class="input-wrap row align-c"> <view class="input-wrap row align-c">
<input class="weui-input" placeholder-class="input-tip" placeholder="请输入手机号"></input> <input placeholder-class="input-tip" placeholder="请输入手机号"></input>
</view> </view>
</view> </view>
<view class="row align-c"> <view class="row align-c">
<view class="input-label row align-c"> <view class="input-label row align-c">
<text space="ensp">预约人数</text> <text space="ensp">预约人数</text>
</view> </view>
<view class="input-wrap row align-c"> <view class="input-wrap row con-b align-c">
<input class="weui-input"></input> <l-button special="{{true}}" bind:lintap="onQuantityCut">
<image class="input-icon" src="../../image/cut.png"></image>
</l-button>
<text>{{formInto.quantity}}</text>
<l-button special="{{true}}" bind:lintap="onQuantityAdd">
<image class="input-icon" src="../../image/add.png"></image>
</l-button>
</view> </view>
</view> </view>
<view class="row align-c"> <view class="row align-c">
<view class="input-label row align-c"> <view class="input-label row align-c">
<text space="ensp">预约日期</text> <text space="ensp">预约日期</text>
</view> </view>
<view class="input-wrap row align-c"> <view class="input-wrap row con-b align-c">
<input class="weui-input"></input> <picker class="input-picker" mode="date" value="{{date}}" start="{{appointmentDate}}" bindchange="onSelectionDate">
<view class="picker">{{formInto.date}}</view>
</picker>
<image class="input-icon" src="../../image/more.png"></image>
</view> </view>
</view> </view>
<view class="quota row con-e align-c"> <view class="quota row con-e align-c" hidden="{{!winQuota}}">
<text>剩余名额：</text> <text>剩余名额：</text>
<text>100</text> <text>100</text>
</view> </view>
...@@ -81,7 +91,7 @@ ...@@ -81,7 +91,7 @@
<text space="ensp">姓 名</text> <text space="ensp">姓 名</text>
</view> </view>
<view class="input-wrap row align-c"> <view class="input-wrap row align-c">
<input class="weui-input" auto-focus placeholder-class="input-tip" placeholder="请输入名字"></input> <input placeholder-class="input-tip" placeholder="请输入名字"></input>
</view> </view>
</view> </view>
<view class="row align-c"> <view class="row align-c">
...@@ -89,7 +99,7 @@ ...@@ -89,7 +99,7 @@
<text space="ensp">手 机 号</text> <text space="ensp">手 机 号</text>
</view> </view>
<view class="input-wrap row align-c"> <view class="input-wrap row align-c">
<input class="weui-input" placeholder-class="input-tip" placeholder="请输入手机号"></input> <input placeholder-class="input-tip" placeholder="请输入手机号"></input>
</view> </view>
</view> </view>
<view class="row align-c"> <view class="row align-c">
...@@ -97,7 +107,10 @@ ...@@ -97,7 +107,10 @@
<text space="ensp">看房日期</text> <text space="ensp">看房日期</text>
</view> </view>
<view class="input-wrap row align-c"> <view class="input-wrap row align-c">
<input class="weui-input"></input> <picker class="input-picker" mode="date" value="{{date}}" start="{{appointmentDate}}" bindchange="onSelectionDate">
<view class="picker">{{formHouse.date}}</view>
</picker>
<image class="input-icon" src="../../image/more.png"></image>
</view> </view>
</view> </view>
</view> </view>
......
pages/appointment/appointment.wxss
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
left: 88rpx; left: 88rpx;
width: 432rpx; width: 432rpx;
height: 80rpx; height: 80rpx;
border: 1rpx #15191f solid; border: 1px #15191f solid;
border-radius: 4rpx; border-radius: 4rpx;
color: #15191f; color: #15191f;
background: #fefcf9; background: #fefcf9;
...@@ -70,8 +70,9 @@ ...@@ -70,8 +70,9 @@
} }
.input-label { .input-label {
width: 160rpx; width: 156rpx;
height: 80rpx; height: 80rpx;
margin-right: 4rpx;
line-height: 42rpx; line-height: 42rpx;
color: #1E2025; color: #1E2025;
} }
...@@ -81,7 +82,7 @@ ...@@ -81,7 +82,7 @@
height: 80rpx; height: 80rpx;
margin: 36rpx 0; margin: 36rpx 0;
padding: 0 24rpx; padding: 0 24rpx;
border: 1rpx #DBDFE5 solid; border: 1px #DBDFE5 solid;
border-radius: 4rpx; border-radius: 4rpx;
} }
...@@ -91,6 +92,15 @@ ...@@ -91,6 +92,15 @@
line-height: 32rpx; line-height: 32rpx;
} }
.input-icon {
width: 32rpx;
height: 32rpx;
}
.input-picker {
flex-grow: 1;
}
.quota { .quota {
position: relative; position: relative;
top: -20rpx; top: -20rpx;
......
pages/appointment/image/banner-1.png
pages/appointment/image/banner-1.png

184 KB | W: | H:

pages/appointment/image/banner-1.png

173 KB | W: | H:

pages/appointment/image/banner-1.png
pages/appointment/image/banner-1.png
pages/appointment/image/banner-1.png
pages/appointment/image/banner-1.png
  • 2-up
  • Swipe
  • Onion skin
pages/appointment/image/banner-2.png
pages/appointment/image/banner-2.png

152 KB | W: | H:

pages/appointment/image/banner-2.png

165 KB | W: | H:

pages/appointment/image/banner-2.png
pages/appointment/image/banner-2.png
pages/appointment/image/banner-2.png
pages/appointment/image/banner-2.png
  • 2-up
  • Swipe
  • Onion skin
pages/campsite/campsite.js
let logicData = {
pageScrollLock: false,
pageScrollTimer: 0,
}
Page({ Page({
data: { data: {
winSide: true,
sideHeight: 1250,
detailImage: [], detailImage: [],
detailImageUrl: [ detailImageUrl: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/home/campsite0.png', 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/home/campsite0.png',
...@@ -12,28 +20,67 @@ Page({ ...@@ -12,28 +20,67 @@ Page({
}, },
onLoad: function (options) { onLoad: function (options) {
this.downloadDetail(this.data.detailIndex) this.setSideHeight()
this.queryDetail()
},
setSideHeight: function () {
this.setData({
sideHeight: this.data.sideHeight * wx.getStorageSync('unitProportion')
})
},
queryDetail: function () {
},
onBackTop: function () {
wx.pageScrollTo({
scrollTop: 0
})
}, },
downloadDetail: function (funcIndex) { onServic: function () {
wx.downloadFile({ wx.makePhoneCall({
url: this.data.detailImageUrl[funcIndex], phoneNumber: '13856782234'
success: (response) => { })
console.log('downloadDetail') },
let funcDetailImage = this.data.detailImage
funcDetailImage.push(response.tempFilePath) /**
* 页面滚动事件
* @function
* @param {object} - funcEvent
* @returns
*/
onPageScroll: function (funcEvent) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
if (funcEvent.scrollTop >= this.data.sideHeight) {
if (this.data.winSide) {
this.setData({ this.setData({
detailImage: funcDetailImage, winSide: false
detailIndex: this.data.detailIndex + 1
}) })
if (this.data.detailImageUrl[this.data.detailIndex]) {
this.downloadDetail(this.data.detailIndex)
}
},
fail: (response) => {
console.log(response)
} }
})
} let funcOpacity = (funcEvent.scrollTop - this.data.sideHeight) / 40
this.setData({
navigationAnimationShow: funcOpacity
})
}
if (funcEvent.scrollTop < this.data.sideHeight && !this.data.winSide) {
this.setData({
winSide: true,
navigationAnimationShow: 0
})
}
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 40)
},
}) })
\ No newline at end of file
pages/campsite/campsite.wxml
<view class="container"> <view class="container">
<view class="appointment">
<l-button l-class="appointment-button" bind:lintap="onServic">电话预约</l-button>
</view>
<view class="appointment-side col con-b align-c" hidden="{{winSide}}">
<button class="appointment-side-top" bindtap="onBackTop">
<image src="../../image/top.png"></image>
</button>
<button class="appointment-side-phone" bind:tap="onServic">
<image src="../../image/phone.png"></image>
</button>
</view>
<block wx:for="{{detailImageUrl}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{detailImageUrl}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<image mode="widthFix" src="{{item}}"></image> <image mode="widthFix" src="{{item}}"></image>
</block> </block>
......
pages/campsite/campsite.wxss
image { .appointment {
width: 100%; position: absolute;
top: 1250rpx;
left: 492rpx;
}
.appointment-button {
width: 218rpx !important;
height: 96rpx !important;
background: #F28FA2 !important;
border-radius: 48rpx !important;
}
.appointment-side {
position: fixed;
right: 40rpx;
bottom: 74rpx;
width: 112rpx;
height: 224rpx;
}
.appointment-side-top {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
background: #ffffff;
box-shadow: 0rpx 16rpx 48rpx 0rpx rgba(0, 0, 0, 0.1);
}
.appointment-side-top image {
width: 48rpx;
height: 48rpx;
margin: 16rpx;
}
.appointment-side-phone {
width: 112rpx;
height: 112rpx;
border-radius: 50%;
background: #F28FA2;
box-shadow: 0rpx 16rpx 40rpx 0rx rgba(242, 143, 162, 0.54);
}
.appointment-side-phone image {
width: 48rpx;
height: 48rpx;
margin: 32rpx;
}
.container > image {
width: 750rpx;
} }
\ No newline at end of file
pages/home/home.js
import iUtils from '../../utils/utils.js'
let logicData = { let logicData = {
pageScrollLock: false, pageScrollLock: false,
pageScrollTimer: 0, pageScrollTimer: 0,
...@@ -6,8 +8,7 @@ let logicData = { ...@@ -6,8 +8,7 @@ let logicData = {
Page({ Page({
data: { data: {
// 导航栏相关属性 // 导航栏相关属性
navigationStatusHeight: 0, navigationLogoTop: 0,
navigationCapsuleTop: 0,
navigationAnimationShow: 0, navigationAnimationShow: 0,
isNavigationLogoWhite: true, isNavigationLogoWhite: true,
...@@ -25,13 +26,9 @@ Page({ ...@@ -25,13 +26,9 @@ Page({
}, },
onLoad: function (options) { onLoad: function (options) {
this.setData({
navigationStatusHeight: wx.getSystemInfoSync().statusBarHeight,
navigationCapsuleTop: wx.getMenuButtonBoundingClientRect().top,
})
this.queryBanner() this.queryBanner()
this.queryStrategy() this.queryStrategy()
this.setNavigationLogo()
// 游客攻略瀑布列表 // 游客攻略瀑布列表
wx.lin.renderWaterFlow(this.data.strategyList, false, () => {}) wx.lin.renderWaterFlow(this.data.strategyList, false, () => {})
}, },
...@@ -70,7 +67,7 @@ Page({ ...@@ -70,7 +67,7 @@ Page({
id: '2', id: '2',
index: 1, index: 1,
image: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home/strategy/strategy-02.jpg', image: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home/strategy/strategy-02.jpg',
title: '漫游海岛奇境，搞定熊孩子的理想国约12000平方米', title: '漫游海岛奇境，搞定熊孩子的理想国约15000m²',
date: '2020-07-10' date: '2020-07-10'
}, { }, {
id: '3', id: '3',
...@@ -113,6 +110,12 @@ Page({ ...@@ -113,6 +110,12 @@ Page({
}, },
setNavigationLogo: function () {
this.setData({
navigationLogoTop: iUtils.navigationElementCenterMarginTop(60)
})
},
onNotice: function (event) { onNotice: function (event) {
wx.navigateTo({ wx.navigateTo({
url: '/pages/notice/notice' url: '/pages/notice/notice'
...@@ -126,7 +129,6 @@ Page({ ...@@ -126,7 +129,6 @@ Page({
}, },
onAppointmentHouse: function () { onAppointmentHouse: function () {
console.log('onAppointmentHouse')
wx.navigateTo({ wx.navigateTo({
url: '/pages/appointment/appointment?type=2' url: '/pages/appointment/appointment?type=2'
}) })
...@@ -151,7 +153,6 @@ Page({ ...@@ -151,7 +153,6 @@ Page({
* @returns * @returns
*/ */
onStrategyDetail: function (funcItem) { onStrategyDetail: function (funcItem) {
console.log(funcItem.detail.item.id)
wx.navigateTo({ wx.navigateTo({
url: '/pages/strategy/strategy?id=' + funcItem.detail.item.id url: '/pages/strategy/strategy?id=' + funcItem.detail.item.id
}) })
...@@ -179,7 +180,6 @@ Page({ ...@@ -179,7 +180,6 @@ Page({
this.setData({ this.setData({
navigationAnimationShow: funcOpacity navigationAnimationShow: funcOpacity
}) })
console.log(funcOpacity)
} }
if (funcEvent.scrollTop < this.data.bannerHeight && !this.data.isNavigationLogoWhite) { if (funcEvent.scrollTop < this.data.bannerHeight && !this.data.isNavigationLogoWhite) {
......
pages/home/home.wxml
<navigation class="navigation" background="{{'rgba(255, 255, 255, ' + navigationAnimationShow + ')'}}"></navigation> <navigation class="navigation" background="{{'rgba(255, 255, 255, ' + navigationAnimationShow + ')'}}"></navigation>
<view class="container"> <view class="container">
<image class="navigation-bar-image" src="/image/logo-w.png" hidden="{{!isNavigationLogoWhite}}" style="{{'top: ' + navigationCapsuleTop + 'px'}}"></image> <image class="logo" src="/image/logo-w.png" hidden="{{!isNavigationLogoWhite}}" style="{{'top: ' + navigationLogoTop + 'px'}}"></image>
<image class="navigation-bar-image" src="/image/logo-b.png" hidden="{{isNavigationLogoWhite}}" style="{{'top: ' + navigationCapsuleTop + 'px'}}"></image> <image class="logo" src="/image/logo-b.png" hidden="{{isNavigationLogoWhite}}" style="{{'top: ' + navigationLogoTop + 'px'}}"></image>
<view id="banner" class="banner"> <view id="banner" class="banner">
<swiper autoplay circular class="banner-swiper" indicator-dots="{{false}}" interval="2000" duration="500" bindchange="onSwiperChange"> <swiper autoplay circular class="banner-swiper" indicator-dots="{{false}}" interval="2000" duration="500" bindchange="onSwiperChange">
...@@ -31,9 +31,9 @@ ...@@ -31,9 +31,9 @@
<view class="detail"> <view class="detail">
<!-- 预约公告 --> <!-- 预约公告 -->
<view class="night row con-b"> <view class="night row con-b" bindtap="onAppointmentInto">
<image src="./image/into.png" mode="aspectFit"></image> <image src="./image/into.png" mode="aspectFit"></image>
<view class="night-content" bindtap="onAppointmentInto"> <view class="night-content">
<view class="night-info-title row align-c"> <view class="night-info-title row align-c">
<image src="./image/night.png"></image> <image src="./image/night.png"></image>
<text>夜间入园预约</text> <text>夜间入园预约</text>
......
pages/home/home.wxss
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
width: 750rpx; width: 750rpx;
} }
.navigation-bar-image { .logo {
z-index: 1100; z-index: 1100;
position: fixed; position: fixed;
top: 60rpx; top: 60rpx;
...@@ -15,6 +15,10 @@ ...@@ -15,6 +15,10 @@
height: 60rpx; height: 60rpx;
} }
.container {
position: relative;
}
.banner { .banner {
z-index: 9; z-index: 9;
......
pages/mine/mine.wxss
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
width: 110rpx; width: 110rpx;
height: 52rpx; height: 52rpx;
border-radius: 2rpx; border-radius: 2rpx;
border: 1rpx solid rgba(72, 53, 34, 1) !important; border: 1px solid rgba(72, 53, 34, 1) !important;
} }
.status-operation text { .status-operation text {
......
pages/play/image/title.png
pages/play/image/title.png

6.28 KB | W: | H:

pages/play/image/title.png

5.02 KB | W: | H:

pages/play/image/title.png
pages/play/image/title.png
pages/play/image/title.png
pages/play/image/title.png
  • 2-up
  • Swipe
  • Onion skin
pages/play/play.js
import iUtils from '../../utils/utils.js'
import deviceUtil from "../../miniprogram_npm/lin-ui/utils/device-util.js" import deviceUtil from "../../miniprogram_npm/lin-ui/utils/device-util.js"
let logicData = { let logicData = {
...@@ -7,6 +8,9 @@ let logicData = { ...@@ -7,6 +8,9 @@ let logicData = {
Page({ Page({
data: { data: {
navigationLogoTop: 0,
navigationLogoMinorTop: 0,
banner: [], banner: [],
bannerIndex: 0, bannerIndex: 0,
...@@ -41,8 +45,6 @@ Page({ ...@@ -41,8 +45,6 @@ Page({
navigationFixed: false, navigationFixed: false,
navigationFixedBoundary: 0, navigationFixedBoundary: 0,
navigationCapsuleTop: wx.getMenuButtonBoundingClientRect().top, navigationCapsuleTop: wx.getMenuButtonBoundingClientRect().top,
}, },
/** /**
...@@ -53,6 +55,7 @@ Page({ ...@@ -53,6 +55,7 @@ Page({
navigationFixedBoundary: 710 / 750 * wx.getSystemInfoSync().windowWidth navigationFixedBoundary: 710 / 750 * wx.getSystemInfoSync().windowWidth
}) })
this.setNavigationLogo()
this.queryBanner() this.queryBanner()
this.queryDetail() this.queryDetail()
}, },
...@@ -77,7 +80,7 @@ Page({ ...@@ -77,7 +80,7 @@ Page({
shop: [{ shop: [{
id: '1', id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-1.png', logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-1.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png', cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background-1.png',
name: '元养水韵SPA馆', name: '元养水韵SPA馆',
describe: '舒缓压力，缓解紧张情绪，沉静心灵，带走负面情绪。在沉静的空气中，身心灵三者合一', describe: '舒缓压力，缓解紧张情绪，沉静心灵，带走负面情绪。在沉静的空气中，身心灵三者合一',
time: '10:00~18:00', time: '10:00~18:00',
...@@ -90,7 +93,7 @@ Page({ ...@@ -90,7 +93,7 @@ Page({
shop: [{ shop: [{
id: '1', id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-2.png', logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-2.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png', cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background-2.png',
name: '原味舒食生态餐厅', name: '原味舒食生态餐厅',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”', describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00', time: '10:00~18:00',
...@@ -99,7 +102,7 @@ Page({ ...@@ -99,7 +102,7 @@ Page({
{ {
id: '1', id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-3.png', logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-3.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png', cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background-3.png',
name: '原野MOJITO', name: '原野MOJITO',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”', describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00', time: '10:00~18:00',
...@@ -112,7 +115,7 @@ Page({ ...@@ -112,7 +115,7 @@ Page({
shop: [{ shop: [{
id: '1', id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-2.png', logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-2.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png', cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background-2.png',
name: '原味舒食生态餐厅', name: '原味舒食生态餐厅',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”', describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00', time: '10:00~18:00',
...@@ -121,7 +124,7 @@ Page({ ...@@ -121,7 +124,7 @@ Page({
{ {
id: '1', id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-3.png', logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-3.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png', cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background-3.png',
name: '原野MOJITO', name: '原野MOJITO',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”', describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00', time: '10:00~18:00',
...@@ -134,7 +137,7 @@ Page({ ...@@ -134,7 +137,7 @@ Page({
shop: [{ shop: [{
id: '1', id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-2.png', logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-2.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png', cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background-2.png',
name: '原味舒食生态餐厅', name: '原味舒食生态餐厅',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”', describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00', time: '10:00~18:00',
...@@ -143,7 +146,7 @@ Page({ ...@@ -143,7 +146,7 @@ Page({
{ {
id: '1', id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-3.png', logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-3.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png', cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background-3.png',
name: '原野MOJITO', name: '原野MOJITO',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”', describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00', time: '10:00~18:00',
...@@ -156,7 +159,7 @@ Page({ ...@@ -156,7 +159,7 @@ Page({
shop: [{ shop: [{
id: '1', id: '1',
logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-1.png', logo: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-logo-1.png',
cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background.png', cover: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play/play-background-1.png',
name: '元养水韵SPA馆', name: '元养水韵SPA馆',
describe: '舒缓压力，缓解紧张情绪，沉静心灵，带走负面情绪。在沉静的空气中，身心灵三者合一', describe: '舒缓压力，缓解紧张情绪，沉静心灵，带走负面情绪。在沉静的空气中，身心灵三者合一',
time: '10:00~18:00', time: '10:00~18:00',
...@@ -170,12 +173,30 @@ Page({ ...@@ -170,12 +173,30 @@ Page({
}) })
}, },
setNavigationLogo: function () {
let funcUnitProportion = wx.getStorageSync('unitProportion')
let funcLogoTop = iUtils.navigationElementCenterMarginTop(50)
let funcLogoMinorTop = funcLogoTop + 50 * funcUnitProportion + 20 * funcUnitProportion
this.setData({
navigationLogoTop: funcLogoTop,
navigationLogoMinorTop: funcLogoMinorTop
})
},
onActivity: function () { onActivity: function () {
wx.navigateTo({ wx.navigateTo({
url: '/pages/activity/activity' url: '/pages/activity/activity'
}) })
}, },
onActivityDetail: function (funcItem) {
wx.navigateTo({
url: '/pages/activity-detail/activity-detail'
})
},
onTabSelection: function (funcEvent) { onTabSelection: function (funcEvent) {
this.setData({ this.setData({
tabIndex: funcEvent.currentTarget.dataset.index tabIndex: funcEvent.currentTarget.dataset.index
......
pages/play/play.wxml
<navigation class="navigation" background="{{navigationBackground}}"></navigation> <navigation class="navigation" background="{{navigationBackground}}"></navigation>
<view class="container"> <view class="container">
<image class="navigation-bar-image" src="./image/title.png" style="{{'top: ' + (navigationCapsuleTop - 8) + 'px'}}"></image> <image class="logo" src="./image/title.png" style="{{'top: ' + navigationLogoTop + 'px'}}"></image>
<view class="logo-minor row align-c" style="{{'top: ' + (navigationLogoMinorTop - 2) + 'px; background: ' + navigationBackground}}">
<image src="./image/title-minor.png"></image>
</view>
<view class="banner"> <view class="banner">
<swiper autoplay circular interval="2000" next-margin="64rpx" bindchange="eventBannerChange"> <swiper autoplay circular interval="2000" next-margin="64rpx" bindchange="eventBannerChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item> <swiper-item>
<image src="{{item}}" class="{{bannerIndex !== index ? 'banner-content': 'banner-content-active'}}"/> <image src="{{item}}" class="{{bannerIndex !== index ? 'banner-content': 'banner-content-active'}}" bindtap="onActivityDetail"/>
</swiper-item> </swiper-item>
</block> </block>
</swiper> </swiper>
......
pages/play/play.wxss
...@@ -6,13 +6,28 @@ page { ...@@ -6,13 +6,28 @@ page {
z-index: 1900; z-index: 1900;
} }
.navigation-bar-image { .logo {
z-index: 1900; z-index: 1900;
position: fixed; position: fixed;
top: 60rpx; top: 60rpx;
left: 50rpx; left: 50rpx;
width: 130rpx; width: 130rpx;
height: 96rpx; 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, .banner,
......
pages/shop-detail/shop-detail.js
...@@ -29,7 +29,7 @@ Page({ ...@@ -29,7 +29,7 @@ Page({
title: '元养水韵SPA馆', title: '元养水韵SPA馆',
date: '周一至周日 10:00 - 22:00', date: '周一至周日 10:00 - 22:00',
describe: '元养水韵SPA馆，是个女性私享的空间。遵循定制化服务理念，每一位芳疗师会根据你的需要针对性地提供面部、头部、身体的SPA服务，柔软中带有力度能最大化地释放你的疲惫。其中，以泰国皇室经典SPA、面部养颜护理摩纳哥-蒙特卡洛足浴、能量中泰式理疗SPA等服务最为出色。每一位芳疗师都采用最正宗的泰国王室御用手法，足不出国就能体现最正宗的SPA体验。', describe: '元养水韵SPA馆，是个女性私享的空间。遵循定制化服务理念，每一位芳疗师会根据你的需要针对性地提供面部、头部、身体的SPA服务，柔软中带有力度能最大化地释放你的疲惫。其中，以泰国皇室经典SPA、面部养颜护理摩纳哥-蒙特卡洛足浴、能量中泰式理疗SPA等服务最为出色。每一位芳疗师都采用最正宗的泰国王室御用手法，足不出国就能体现最正宗的SPA体验。',
contact: '18000000000' contact: '13856782234'
} }
this.setData({ this.setData({
banner: response.banner, banner: response.banner,
......
pages/strategy/strategy.js
...@@ -64,7 +64,6 @@ Page({ ...@@ -64,7 +64,6 @@ Page({
detailImageUrl: [this.data.testData[funcIndex].content], detailImageUrl: [this.data.testData[funcIndex].content],
relation: this.data.testData[funcIndex].relation relation: this.data.testData[funcIndex].relation
}) })
this.downloadDetail(this.data.detailIndex)
}, },
onSwiperChange: function (funcEvent) { onSwiperChange: function (funcEvent) {
...@@ -73,27 +72,6 @@ Page({ ...@@ -73,27 +72,6 @@ Page({
}) })
}, },
downloadDetail: function (funcIndex) {
wx.downloadFile({
url: this.data.detailImageUrl[funcIndex],
success: (response) => {
let funcDetailImage = this.data.detailImage
funcDetailImage.push(response.tempFilePath)
this.setData({
detailImage: funcDetailImage,
detailIndex: this.data.detailIndex + 1
})
if (this.data.detailImageUrl[this.data.detailIndex]) {
this.downloadDetail(this.data.detailIndex)
}
},
fail: (response) => {
console.log(response)
}
})
},
onPageScroll: function(funcEvent) { onPageScroll: function(funcEvent) {
// 优化滚动事件触发频率 // 优化滚动事件触发频率
if (logicData.pageScrollLock) return if (logicData.pageScrollLock) return
......
pages/strategy/strategy.wxml
...@@ -2,16 +2,7 @@ ...@@ -2,16 +2,7 @@
<view class="container"> <view class="container">
<view id="banner" class="banner"> <view id="banner" class="banner">
<swiper <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="onSwiperChange">
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="onSwiperChange"
>
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item class="banner-swiper-item"> <swiper-item class="banner-swiper-item">
<image class="banner-swiper-image" src="{{item}}"></image> <image class="banner-swiper-image" src="{{item}}"></image>
......
utils/utils.js 0 → 100644
let output = {
navigationElementCenterMarginTop: function (funcElementHeight) {
let funcUnitProportion = wx.getStorageSync('unitProportion')
let funcStatusHeight = wx.getStorageSync('navigationStatusHeight')
let funcCapsuleHeight = wx.getStorageSync('navigationCapsuleHeight')
// 计算元素 px 高度
let funcElementHeightPx = funcElementHeight * funcUnitProportion
// 元素高度小于胶囊高度
if (funcCapsuleHeight < funcElementHeightPx) {
return funcStatusHeight + funcCapsuleHeight - funcElementHeightPx
}
// 元素高度大于胶囊高度
if (funcElementHeightPx < funcCapsuleHeight) {
return (funcCapsuleHeight - funcElementHeightPx) / 2 + funcStatusHeight - 4 * funcUnitProportion
}
}
}
export default output
\ No newline at end of file
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