Skip to content

严立 / mini-shimao

Go to a project
Commit db6977a7 by 严立
Options

UI细节优化

parent 4aa686d9
Inline Side-by-side
Showing with 443 additions and 131 deletions
app.js
App({
onLaunch: function () {
// console.log('wx.env', wx.env)
this.setUnitProportion()
},
onShow: function (options) {
......@@ -17,5 +17,10 @@ App({
globalData: {
}
},
setUnitProportion: function () {
let funcProportion = wx.getSystemInfoSync().windowWidth / 750
wx.setStorageSync('unitProportion', funcProportion)
},
})
app.json
......@@ -29,11 +29,14 @@
"l-price": "../miniprogram_npm/lin-ui/price/index",
"l-tabs": "../miniprogram_npm/lin-ui/tabs/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"
},
"window": {
"navigationStyle": "custom",
"backgroundTextStyle": "light",
"navigationBarTextStyle": "white",
"backgroundColor": "#F2F2F2",
"backgroundTextStyle": "dark",
"enablePullDownRefresh": false
},
"tabBar": {
......
component/navigation/navigation.js
......@@ -60,27 +60,6 @@ Component({
},
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() {
var that = this
......@@ -99,9 +78,8 @@ Component({
navHeight: navHeight
})
wx.setStorageSync('navigationHeight', this.data.status + this.data.navHeight)
console.log(wx.getStorageSync('navigationHeight'))
that.getHeight()
wx.setStorageSync('navigationStatusHeight', this.data.status)
wx.setStorageSync('navigationCapsuleHeight', this.data.navHeight)
},
setStyle: function() {
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({
data: {
formType: 1,
entryComplete: false,
formInto: {
name: '',
phone: '',
quantity: 0,
date: '',
},
},
onLoad: function (options) {
console.log(options)
this.setData({
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 () {
......
pages/activity-entry/activity-entry.wxml
<l-toast></l-toast>
<navigation class="navigation" titleText="活动报名" backIcon="/image/back.png"></navigation>
<view class="entry-complete row con-c align-c" wx:if="{{entryComplete}}">
......@@ -33,7 +34,7 @@
<text space="ensp">姓 名</text>
</view>
<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 class="row align-c">
......@@ -48,16 +49,25 @@
<view class="input-label row align-c">
<text space="ensp">报名人数</text>
</view>
<view class="input-wrap row align-c">
<input class="weui-input"></input>
<view class="input-wrap row con-b align-c">
<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 class="row align-c">
<view class="input-label row align-c">
<text space="ensp">报名时间</text>
</view>
<view class="input-wrap row align-c">
<input class="weui-input"></input>
<view class="input-wrap row con-b align-c">
<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>
......
pages/activity-entry/activity-entry.wxss
......@@ -38,7 +38,7 @@
left: 88rpx;
width: 432rpx;
height: 80rpx;
border: 1rpx #15191f solid;
border: 1px #15191f solid;
border-radius: 4rpx;
color: #15191f;
background: #fefcf9;
......@@ -108,7 +108,7 @@
height: 80rpx;
margin: 36rpx 0;
padding: 0 24rpx;
border: 1rpx #DBDFE5 solid;
border: 1px #DBDFE5 solid;
border-radius: 4rpx;
}
......@@ -118,6 +118,15 @@
line-height: 32rpx;
}
.input-icon {
width: 32rpx;
height: 32rpx;
}
.input-picker {
flex-grow: 1;
}
.quota {
position: relative;
top: -20rpx;
......
pages/appointment/appointment.js
import iMiment from '../../npm/miment.js'
Page({
data: {
formType: 1,
appointmentDate: '',
appointmentComplete: false,
formInto: {
name: '',
phone: '',
quantity: 0,
date: '',
},
formHouse: {
name: '',
phone: '',
date: '',
},
winQuota: false,
},
onLoad: function (options) {
console.log(options)
this.setData({
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 () {
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({
this.setData({
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>
<view class="appointment-complete row con-c align-c" wx:if="{{appointmentComplete}}">
......@@ -25,7 +26,7 @@
<text space="ensp">姓 名</text>
</view>
<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 class="row align-c">
......@@ -33,26 +34,35 @@
<text space="ensp">手 机 号</text>
</view>
<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 class="row align-c">
<view class="input-label row align-c">
<text space="ensp">预约人数</text>
</view>
<view class="input-wrap row align-c">
<input class="weui-input"></input>
<view class="input-wrap row con-b align-c">
<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 class="row align-c">
<view class="input-label row align-c">
<text space="ensp">预约日期</text>
</view>
<view class="input-wrap row align-c">
<input class="weui-input"></input>
<view class="input-wrap row con-b align-c">
<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 class="quota row con-e align-c">
<view class="quota row con-e align-c" hidden="{{!winQuota}}">
<text>剩余名额：</text>
<text>100</text>
</view>
......@@ -81,7 +91,7 @@
<text space="ensp">姓 名</text>
</view>
<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 class="row align-c">
......@@ -89,7 +99,7 @@
<text space="ensp">手 机 号</text>
</view>
<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 class="row align-c">
......@@ -97,7 +107,10 @@
<text space="ensp">看房日期</text>
</view>
<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>
......
pages/appointment/appointment.wxss
......@@ -34,7 +34,7 @@
left: 88rpx;
width: 432rpx;
height: 80rpx;
border: 1rpx #15191f solid;
border: 1px #15191f solid;
border-radius: 4rpx;
color: #15191f;
background: #fefcf9;
......@@ -70,8 +70,9 @@
}
.input-label {
width: 160rpx;
width: 156rpx;
height: 80rpx;
margin-right: 4rpx;
line-height: 42rpx;
color: #1E2025;
}
......@@ -81,7 +82,7 @@
height: 80rpx;
margin: 36rpx 0;
padding: 0 24rpx;
border: 1rpx #DBDFE5 solid;
border: 1px #DBDFE5 solid;
border-radius: 4rpx;
}
......@@ -91,6 +92,15 @@
line-height: 32rpx;
}
.input-icon {
width: 32rpx;
height: 32rpx;
}
.input-picker {
flex-grow: 1;
}
.quota {
position: relative;
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({
data: {
winSide: true,
sideHeight: 1250,
detailImage: [],
detailImageUrl: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/home/campsite0.png',
......@@ -12,28 +20,67 @@ Page({
},
onLoad: function (options) {
this.downloadDetail(this.data.detailIndex)
this.setSideHeight()
this.queryDetail()
},
downloadDetail: function (funcIndex) {
wx.downloadFile({
url: this.data.detailImageUrl[funcIndex],
success: (response) => {
console.log('downloadDetail')
let funcDetailImage = this.data.detailImage
funcDetailImage.push(response.tempFilePath)
setSideHeight: function () {
this.setData({
detailImage: funcDetailImage,
detailIndex: this.data.detailIndex + 1
sideHeight: this.data.sideHeight * wx.getStorageSync('unitProportion')
})
},
if (this.data.detailImageUrl[this.data.detailIndex]) {
this.downloadDetail(this.data.detailIndex)
}
queryDetail: function () {
},
onBackTop: function () {
wx.pageScrollTo({
scrollTop: 0
})
},
onServic: function () {
wx.makePhoneCall({
phoneNumber: '13856782234'
})
},
fail: (response) => {
console.log(response)
/**
* 页面滚动事件
* @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({
winSide: false
})
}
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="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">
<image mode="widthFix" src="{{item}}"></image>
</block>
......
pages/campsite/campsite.wxss
image {
width: 100%;
.appointment {
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 = {
pageScrollLock: false,
pageScrollTimer: 0,
......@@ -6,8 +8,7 @@ let logicData = {
Page({
data: {
// 导航栏相关属性
navigationStatusHeight: 0,
navigationCapsuleTop: 0,
navigationLogoTop: 0,
navigationAnimationShow: 0,
isNavigationLogoWhite: true,
......@@ -25,13 +26,9 @@ Page({
},
onLoad: function (options) {
this.setData({
navigationStatusHeight: wx.getSystemInfoSync().statusBarHeight,
navigationCapsuleTop: wx.getMenuButtonBoundingClientRect().top,
})
this.queryBanner()
this.queryStrategy()
this.setNavigationLogo()
// 游客攻略瀑布列表
wx.lin.renderWaterFlow(this.data.strategyList, false, () => {})
},
......@@ -70,7 +67,7 @@ Page({
id: '2',
index: 1,
image: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home/strategy/strategy-02.jpg',
title: '漫游海岛奇境，搞定熊孩子的理想国约12000平方米',
title: '漫游海岛奇境，搞定熊孩子的理想国约15000m²',
date: '2020-07-10'
}, {
id: '3',
......@@ -113,6 +110,12 @@ Page({
},
setNavigationLogo: function () {
this.setData({
navigationLogoTop: iUtils.navigationElementCenterMarginTop(60)
})
},
onNotice: function (event) {
wx.navigateTo({
url: '/pages/notice/notice'
......@@ -126,7 +129,6 @@ Page({
},
onAppointmentHouse: function () {
console.log('onAppointmentHouse')
wx.navigateTo({
url: '/pages/appointment/appointment?type=2'
})
......@@ -151,7 +153,6 @@ Page({
* @returns
*/
onStrategyDetail: function (funcItem) {
console.log(funcItem.detail.item.id)
wx.navigateTo({
url: '/pages/strategy/strategy?id=' + funcItem.detail.item.id
})
......@@ -179,7 +180,6 @@ Page({
this.setData({
navigationAnimationShow: funcOpacity
})
console.log(funcOpacity)
}
if (funcEvent.scrollTop < this.data.bannerHeight && !this.data.isNavigationLogoWhite) {
......
pages/home/home.wxml
<navigation class="navigation" background="{{'rgba(255, 255, 255, ' + navigationAnimationShow + ')'}}"></navigation>
<view class="container">
<image class="navigation-bar-image" src="/image/logo-w.png" hidden="{{!isNavigationLogoWhite}}" style="{{'top: ' + navigationCapsuleTop + '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-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="2000" duration="500" bindchange="onSwiperChange">
......@@ -31,9 +31,9 @@
<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>
<view class="night-content" bindtap="onAppointmentInto">
<view class="night-content">
<view class="night-info-title row align-c">
<image src="./image/night.png"></image>
<text>夜间入园预约</text>
......
pages/home/home.wxss
......@@ -6,7 +6,7 @@
width: 750rpx;
}
.navigation-bar-image {
.logo {
z-index: 1100;
position: fixed;
top: 60rpx;
......@@ -15,6 +15,10 @@
height: 60rpx;
}
.container {
position: relative;
}
.banner {
z-index: 9;
......
pages/mine/mine.wxss
......@@ -53,7 +53,7 @@
width: 110rpx;
height: 52rpx;
border-radius: 2rpx;
border: 1rpx solid rgba(72, 53, 34, 1) !important;
border: 1px solid rgba(72, 53, 34, 1) !important;
}
.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"
let logicData = {
......@@ -7,6 +8,9 @@ let logicData = {
Page({
data: {
navigationLogoTop: 0,
navigationLogoMinorTop: 0,
banner: [],
bannerIndex: 0,
......@@ -41,8 +45,6 @@ Page({
navigationFixed: false,
navigationFixedBoundary: 0,
navigationCapsuleTop: wx.getMenuButtonBoundingClientRect().top,
},
/**
......@@ -53,6 +55,7 @@ Page({
navigationFixedBoundary: 710 / 750 * wx.getSystemInfoSync().windowWidth
})
this.setNavigationLogo()
this.queryBanner()
this.queryDetail()
},
......@@ -77,7 +80,7 @@ Page({
shop: [{
id: '1',
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馆',
describe: '舒缓压力，缓解紧张情绪，沉静心灵，带走负面情绪。在沉静的空气中，身心灵三者合一',
time: '10:00~18:00',
......@@ -90,7 +93,7 @@ Page({
shop: [{
id: '1',
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: '原味舒食生态餐厅',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00',
......@@ -99,7 +102,7 @@ Page({
{
id: '1',
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',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00',
......@@ -112,7 +115,7 @@ Page({
shop: [{
id: '1',
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: '原味舒食生态餐厅',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00',
......@@ -121,7 +124,7 @@ Page({
{
id: '1',
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',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00',
......@@ -134,7 +137,7 @@ Page({
shop: [{
id: '1',
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: '原味舒食生态餐厅',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00',
......@@ -143,7 +146,7 @@ Page({
{
id: '1',
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',
describe: '打造自然和平饮食，传递与自然共生的饮食信念感。“美食界的乌托邦，自然界的米其林”',
time: '10:00~18:00',
......@@ -156,7 +159,7 @@ Page({
shop: [{
id: '1',
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馆',
describe: '舒缓压力，缓解紧张情绪，沉静心灵，带走负面情绪。在沉静的空气中，身心灵三者合一',
time: '10:00~18:00',
......@@ -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 () {
wx.navigateTo({
url: '/pages/activity/activity'
})
},
onActivityDetail: function (funcItem) {
wx.navigateTo({
url: '/pages/activity-detail/activity-detail'
})
},
onTabSelection: function (funcEvent) {
this.setData({
tabIndex: funcEvent.currentTarget.dataset.index
......
pages/play/play.wxml
<navigation class="navigation" background="{{navigationBackground}}"></navigation>
<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">
<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">
<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>
</block>
</swiper>
......
pages/play/play.wxss
......@@ -6,13 +6,28 @@ page {
z-index: 1900;
}
.navigation-bar-image {
.logo {
z-index: 1900;
position: fixed;
top: 60rpx;
left: 50rpx;
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,
......
pages/shop-detail/shop-detail.js
......@@ -29,7 +29,7 @@ Page({
title: '元养水韵SPA馆',
date: '周一至周日 10:00 - 22:00',
describe: '元养水韵SPA馆，是个女性私享的空间。遵循定制化服务理念，每一位芳疗师会根据你的需要针对性地提供面部、头部、身体的SPA服务，柔软中带有力度能最大化地释放你的疲惫。其中，以泰国皇室经典SPA、面部养颜护理摩纳哥-蒙特卡洛足浴、能量中泰式理疗SPA等服务最为出色。每一位芳疗师都采用最正宗的泰国王室御用手法，足不出国就能体现最正宗的SPA体验。',
contact: '18000000000'
contact: '13856782234'
}
this.setData({
banner: response.banner,
......
pages/strategy/strategy.js
......@@ -64,7 +64,6 @@ Page({
detailImageUrl: [this.data.testData[funcIndex].content],
relation: this.data.testData[funcIndex].relation
})
this.downloadDetail(this.data.detailIndex)
},
onSwiperChange: function (funcEvent) {
......@@ -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) {
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
......
pages/strategy/strategy.wxml
......@@ -2,16 +2,7 @@
<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="onSwiperChange"
>
<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">
<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>
......
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