Skip to content

严立 / mini-shimao

Go to a project
Commit c649cc7d by 严立
Options

初版静态

parent a6ad1c9c
Inline Side-by-side
Showing with 272 additions and 126 deletions
app.json
{ {
"pages": [ "pages": [
"pages/mine/mine",
"pages/home/home",
"pages/play/play", "pages/play/play",
"pages/home-strategy/home-strategy", "pages/home/home",
"pages/index/index", "pages/index/index",
"pages/mine/mine",
"pages/home-strategy/home-strategy",
"pages/campsite/campsite" "pages/campsite/campsite"
......
component/navigation/navigation.js
...@@ -50,9 +50,9 @@ Component({ ...@@ -50,9 +50,9 @@ Component({
lifetimes: { lifetimes: {
attached: function(){ attached: function(){
var that = this; var that = this
that.setNavSize(); that.setNavSize()
that.setStyle(); that.setStyle()
}, },
}, },
...@@ -60,26 +60,50 @@ Component({ ...@@ -60,26 +60,50 @@ 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
, sysinfo = wx.getSystemInfoSync() let sysinfo = wx.getSystemInfoSync()
, statusHeight = sysinfo.statusBarHeight let statusHeight = sysinfo.statusBarHeight
, isiOS = sysinfo.system.indexOf('iOS') > -1 let isIOS = sysinfo.system.indexOf('iOS') > -1
, navHeight; let navHeight
if (!isiOS) {
navHeight = 48; if (isIOS) {
} else {
navHeight = 44; navHeight = 44;
} else {
navHeight = 48;
} }
that.setData({ that.setData({
status: statusHeight, status: statusHeight,
navHeight: navHeight navHeight: navHeight
}) })
wx.setStorageSync('navigationHeight', this.data.status + this.data.navHeight)
console.log(wx.getStorageSync('navigationHeight'))
that.getHeight()
}, },
setStyle: function() { setStyle: function() {
console.log('setStyle')
var that = this, containerStyle, textStyle, iconStyle; var that = this, containerStyle, textStyle, iconStyle;
containerStyle = [ containerStyle = [
'background:' + that.data.background 'background:' + that.data.background
......
component/navigation/navigation.wxml
<view class='nav' style='height: {{status + navHeight}}px'> <view class='nav' style='height: {{status + navHeight}}px'>
<view class='status' style='height: {{status}}px;{{containerStyle}}'></view> <view id="status" class='status' style='height: {{status}}px;{{containerStyle}}'></view>
<view class='navbar' style='height:{{navHeight}}px;{{containerStyle}}'> <view id="navbar" class='navbar' style='height:{{navHeight}}px;{{containerStyle}}'>
<view class='back-icon' wx:if="{{backIcon}}" bindtap='back'> <view class='back-icon' wx:if="{{backIcon}}" bindtap='back'>
<image src='{{backIcon}}'></image> <image src='{{backIcon}}'></image>
</view> </view>
......
component/navigation/navigation.wxss
.nav { .nav {
z-index: 2000; z-index: 2000;
/* position: fixed; }
top: 0;
left: 0; .status {
border: 1rpx red solid; */ background: red;
}
.navbar {
background: green;
} }
.navbar{ .navbar{
......
image/banner-0.png
image/banner-0.png

62.1 KB | W: | H:

image/banner-0.png

79.3 KB | W: | H:

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

148 KB | W: | H:

image/banner-1.png

69.9 KB | W: | H:

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

96.8 KB | W: | H:

image/banner-2.png

70.1 KB | W: | H:

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

16.4 KB | W: | H:

image/strategy-0.png

7.95 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

22.3 KB | W: | H:

image/strategy-1.png

8.2 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/tabbar/campsite-s.png
image/tabbar/campsite-s.png

2.84 KB | W: | H:

image/tabbar/campsite-s.png

961 Bytes | W: | H:

image/tabbar/campsite-s.png
image/tabbar/campsite-s.png
image/tabbar/campsite-s.png
image/tabbar/campsite-s.png
  • 2-up
  • Swipe
  • Onion skin
image/tabbar/campsite.png
image/tabbar/campsite.png

3.69 KB | W: | H:

image/tabbar/campsite.png

899 Bytes | W: | H:

image/tabbar/campsite.png
image/tabbar/campsite.png
image/tabbar/campsite.png
image/tabbar/campsite.png
  • 2-up
  • Swipe
  • Onion skin
image/tabbar/home-s.png
image/tabbar/home-s.png

1.32 KB | W: | H:

image/tabbar/home-s.png

539 Bytes | W: | H:

image/tabbar/home-s.png
image/tabbar/home-s.png
image/tabbar/home-s.png
image/tabbar/home-s.png
  • 2-up
  • Swipe
  • Onion skin
image/tabbar/home.png
image/tabbar/home.png

2.62 KB | W: | H:

image/tabbar/home.png

553 Bytes | W: | H:

image/tabbar/home.png
image/tabbar/home.png
image/tabbar/home.png
image/tabbar/home.png
  • 2-up
  • Swipe
  • Onion skin
image/tabbar/mine-s.png
image/tabbar/mine-s.png

1.1 KB | W: | H:

image/tabbar/mine-s.png

481 Bytes | W: | H:

image/tabbar/mine-s.png
image/tabbar/mine-s.png
image/tabbar/mine-s.png
image/tabbar/mine-s.png
  • 2-up
  • Swipe
  • Onion skin
image/tabbar/mine.png
image/tabbar/mine.png

2.7 KB | W: | H:

image/tabbar/mine.png

462 Bytes | W: | H:

image/tabbar/mine.png
image/tabbar/mine.png
image/tabbar/mine.png
image/tabbar/mine.png
  • 2-up
  • Swipe
  • Onion skin
image/tabbar/play-s.png
image/tabbar/play-s.png

4.29 KB | W: | H:

image/tabbar/play-s.png

1.41 KB | W: | H:

image/tabbar/play-s.png
image/tabbar/play-s.png
image/tabbar/play-s.png
image/tabbar/play-s.png
  • 2-up
  • Swipe
  • Onion skin
image/tabbar/play.png
image/tabbar/play.png

5.43 KB | W: | H:

image/tabbar/play.png

1.3 KB | W: | H:

image/tabbar/play.png
image/tabbar/play.png
image/tabbar/play.png
image/tabbar/play.png
  • 2-up
  • Swipe
  • Onion skin
pages/home-strategy/home-strategy.js
...@@ -4,44 +4,66 @@ let logicData = { ...@@ -4,44 +4,66 @@ let logicData = {
} }
Page({ Page({
/**
* 页面的初始数据
*/
data: { data: {
navigationBackground: 'rgba(0, 0, 0, 0)', testData: [
{
banner: [ banner: [
'../../image/banner-0.png', './image/1-banner-1.png',
'../../image/banner-1.png', './image/1-banner-2.png',
'../../image/banner-2.png' './image/1-banner-3.png',
], ],
bannerIndex: 0, title: '碧海银湖里的自然系饮食 | 原味舒食',
content: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home-strategy-1.png',
detailImage: [],
detailImageUrl: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home-strategy.png',
],
detailIndex: 0,
relation: [ relation: [
{ {
'cover': '/image/strategy-0.png',
'title': '元养水韵SPA馆',
'time': '营业时间 12:00-14:00',
'price': '¥10-¥5000/人',
'describe': '',
}, {
'cover': '/image/strategy-1.png', 'cover': '/image/strategy-1.png',
'title': '原味舒食生态餐厅原味舒', 'title': '原味舒食生态餐厅原味舒',
'time': '营业时间 10:00-17:00', 'time': '营业时间 10:00-17:00',
'price': '¥20-¥50/人', 'price': '¥20-¥50/人',
'describe': '', 'describe': '',
}, }
]
}, {
banner: [
'./image/2-banner-1.png',
'./image/2-banner-2.png',
'./image/2-banner-3.png',
],
title: '碧海银湖里的自然系饮食 | 原味舒食',
content: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home-strategy-2.png',
relation: [
{
'cover': '/image/strategy-2.png',
'title': '儿童营地',
'time': '营业时间 10:00-17:00',
'price': '¥20-¥50/人',
'describe': '',
}
] ]
}, },
],
navigationBackground: 'rgba(0, 0, 0, 0)',
banner: [],
bannerIndex: 0,
detailImage: [],
detailImageUrl: [],
detailIndex: 0,
relation: []
},
onLoad: function (options) { onLoad: function (options) {
console.log('onLoad', options)
this.setInitData(Number(options.id) - 1)
},
setInitData: function (funcIndex) {
this.setData({
banner: this.data.testData[funcIndex].banner,
detailImageUrl: [this.data.testData[funcIndex].content],
relation: this.data.testData[funcIndex].relation
})
this.downloadDetail(this.data.detailIndex) this.downloadDetail(this.data.detailIndex)
}, },
......
pages/home-strategy/home-strategy.wxml
...@@ -25,7 +25,9 @@ ...@@ -25,7 +25,9 @@
</view> </view>
<view class="detail"> <view class="detail">
<image mode="widthFix" src="/image/home-strategy.png"></image> <block wx:for="{{detailImageUrl}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<image mode="widthFix" src="{{item}}"></image>
</block>
<view class="relation"> <view class="relation">
<view class="relation-title"> <view class="relation-title">
......
pages/home/component/strategy-item/strategy-item.wxss
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
.component-strategy-item-title { .component-strategy-item-title {
display: -webkit-box; display: -webkit-box;
margin: 24rpx; margin: 24rpx 20rpx;
font-size: 26rpx; font-size: 26rpx;
font-weight: bolder; font-weight: bolder;
color: #000000; color: #000000;
......
pages/home/home.js
...@@ -7,6 +7,12 @@ let logicData = { ...@@ -7,6 +7,12 @@ let logicData = {
Page({ Page({
data: { data: {
imitateScrollBase: 0, // 滑动起始位置
imitateScrollLocation: 0, // 当前位置
imitateScrollPageHeight: 0, // 页面整体高度
imitateScrollSmoothness: 2, // 滚动速率
navigationStyle: 'position: absolute; top: -navigationHeightrpx; left: 0;', navigationStyle: 'position: absolute; top: -navigationHeightrpx; left: 0;',
navigationAnimationShow: 0, navigationAnimationShow: 0,
...@@ -22,27 +28,33 @@ Page({ ...@@ -22,27 +28,33 @@ Page({
bannerHeight: 300, bannerHeight: 300,
strategyList: [{ strategyList: [{
image: '/pages/home/image/strategy-00.png', id: '1',
title: '碧海银湖40万方海岛精灵乐园，秘境度假中心。',
date: '2020-07-10'
}, {
image: '/pages/home/image/strategy-01.png', image: '/pages/home/image/strategy-01.png',
title: '仲夏夜狂欢，体验滨海度假趣味生活！！', title: '碧海银湖里的自然系饮食|原味舒食。',
date: '2020-07-10' date: '2020-07-10'
}, { }, {
id: '2',
image: '/pages/home/image/strategy-02.png', image: '/pages/home/image/strategy-02.png',
title: '盛放的海岛秘境，全家人敞开玩的度假胜地之选，后面的内容巴拉巴拉。', title: '漫游海岛奇境，搞定熊孩子的理想国约12000平方米',
date: '2020-07-10' date: '2020-07-10'
}, { }, {
id: '3',
image: '/pages/home/image/strategy-03.png', image: '/pages/home/image/strategy-03.png',
title: '周末给不了你的快乐，40万方超级乐园给你尽情玩耍。', title: '盛放的海岛秘境，全家人敞开玩的度假胜地之选，后面的内容巴拉巴拉。',
date: '2020-07-10' date: '2020-07-10'
}, { }, {
id: '4',
image: '/pages/home/image/strategy-04.png', image: '/pages/home/image/strategy-04.png',
title: '这里的蓝真的舒服，美好的微风吹得让人沉醉了，躺下了。', title: '周末给不了你的快乐，40万方超级乐园给你尽情玩耍。',
date: '2020-07-10' date: '2020-07-10'
}, { }, {
id: '5',
image: '/pages/home/image/strategy-05.png', image: '/pages/home/image/strategy-05.png',
title: '这里的蓝真的舒服，美好的微风吹得让人沉醉了，躺下了。',
date: '2020-07-10'
}, {
id: '6',
image: '/pages/home/image/strategy-06.png',
title: '懂生活的你，必定喜欢懂品质的碧海银湖。', title: '懂生活的你，必定喜欢懂品质的碧海银湖。',
date: '2020-07-10' date: '2020-07-10'
}], }],
...@@ -55,23 +67,24 @@ Page({ ...@@ -55,23 +67,24 @@ Page({
// wx.hideTabBar() // wx.hideTabBar()
// wx.showTabBar() // wx.showTabBar()
const query = wx.createSelectorQuery() wx.getSystemInfo({
query.select('#banner').boundingClientRect() success: (result) => {
query.selectViewport().scrollOffset() console.log(result)
query.exec((res) => {
this.setData({ this.setData({
bannerHeight: res[0].height * 0.9 imitateScrollPageHeight: result.screenHeight
}) })
},
}) })
}, },
onStrategyDetail: function (funcItem) { onStrategyDetail: function (funcItem) {
console.log(funcItem) console.log(funcItem.detail.item.id)
wx.navigateTo({ wx.navigateTo({
url: '/pages/home-strategy/home-strategy' url: '/pages/home-strategy/home-strategy?id=' + funcItem.detail.item.id
}) })
}, },
onPageScroll: function(funcEvent) { onPageScroll: function(funcEvent) {
console.log('onPageScroll')
// 优化滚动事件触发频率 // 优化滚动事件触发频率
if (logicData.pageScrollLock) return if (logicData.pageScrollLock) return
logicData.pageScrollLock = true logicData.pageScrollLock = true
......
pages/home/home.json
{ {
"disableScroll": true,
"usingComponents": { "usingComponents": {
"strategy-item": "./component/strategy-item/strategy-item" "strategy-item": "./component/strategy-item/strategy-item"
} }
......
pages/home/home.wxml
<view class="prohibit-pull-down"> <navigation class="navigation" background="{{'rgba(255, 255, 255, 1)'}}"></navigation>
<navigation class="navigation" background="{{'rgba(255, 255, 255, 1)'}}"></navigation>
<view class="container"> <view class="container">
<!-- <view class="container" bindtouchstart='imitateScrollBase' bindtouchmove='imitateScrollMove'> -->
<image class="navigation-bar-image" src="/image/logo-w.png" hidden="{{!isNavigationLogoWhite}}"></image> <image class="navigation-bar-image" src="/image/logo-w.png" hidden="{{!isNavigationLogoWhite}}"></image>
<image class="navigation-bar-image" src="/image/logo-b.png" hidden="{{isNavigationLogoWhite}}"></image> <image class="navigation-bar-image" src="/image/logo-b.png" hidden="{{isNavigationLogoWhite}}"></image>
...@@ -83,5 +83,4 @@ ...@@ -83,5 +83,4 @@
<l-water-flow column-gap="14rpx" generic:l-water-flow-item="strategy-item" bind:linitemtap="onStrategyDetail"></l-water-flow> <l-water-flow column-gap="14rpx" generic:l-water-flow-item="strategy-item" bind:linitemtap="onStrategyDetail"></l-water-flow>
</view> </view>
</view> </view>
</view>
</view> </view>
\ No newline at end of file
pages/home/image/appointment.png
pages/home/image/appointment.png

102 KB | W: | H:

pages/home/image/appointment.png

35.5 KB | W: | H:

pages/home/image/appointment.png
pages/home/image/appointment.png
pages/home/image/appointment.png
pages/home/image/appointment.png
  • 2-up
  • Swipe
  • Onion skin
pages/home/image/guide.png
pages/home/image/guide.png

19.4 KB | W: | H:

pages/home/image/guide.png

15.3 KB | W: | H:

pages/home/image/guide.png
pages/home/image/guide.png
pages/home/image/guide.png
pages/home/image/guide.png
  • 2-up
  • Swipe
  • Onion skin
pages/home/image/strategy-01.png
pages/home/image/strategy-01.png

78.2 KB | W: | H:

pages/home/image/strategy-01.png

67.9 KB | W: | H:

pages/home/image/strategy-01.png
pages/home/image/strategy-01.png
pages/home/image/strategy-01.png
pages/home/image/strategy-01.png
  • 2-up
  • Swipe
  • Onion skin
pages/home/image/strategy-02.png
pages/home/image/strategy-02.png

73.6 KB | W: | H:

pages/home/image/strategy-02.png

92.8 KB | W: | H:

pages/home/image/strategy-02.png
pages/home/image/strategy-02.png
pages/home/image/strategy-02.png
pages/home/image/strategy-02.png
  • 2-up
  • Swipe
  • Onion skin
pages/home/image/strategy-03.png
pages/home/image/strategy-03.png

97.1 KB | W: | H:

pages/home/image/strategy-03.png

67.3 KB | W: | H:

pages/home/image/strategy-03.png
pages/home/image/strategy-03.png
pages/home/image/strategy-03.png
pages/home/image/strategy-03.png
  • 2-up
  • Swipe
  • Onion skin
pages/home/image/strategy-04.png
pages/home/image/strategy-04.png

80.7 KB | W: | H:

pages/home/image/strategy-04.png

92.2 KB | W: | H:

pages/home/image/strategy-04.png
pages/home/image/strategy-04.png
pages/home/image/strategy-04.png
pages/home/image/strategy-04.png
  • 2-up
  • Swipe
  • Onion skin
pages/home/image/strategy-05.png
pages/home/image/strategy-05.png

78 KB | W: | H:

pages/home/image/strategy-05.png

63.4 KB | W: | H:

pages/home/image/strategy-05.png
pages/home/image/strategy-05.png
pages/home/image/strategy-05.png
pages/home/image/strategy-05.png
  • 2-up
  • Swipe
  • Onion skin
pages/home/image/strategy.png
pages/home/image/strategy.png

81.9 KB | W: | H:

pages/home/image/strategy.png

29.2 KB | W: | H:

pages/home/image/strategy.png
pages/home/image/strategy.png
pages/home/image/strategy.png
pages/home/image/strategy.png
  • 2-up
  • Swipe
  • Onion skin
pages/home/image/title-appointment.png
pages/home/image/title-appointment.png

7.05 KB | W: | H:

pages/home/image/title-appointment.png

2.22 KB | W: | H:

pages/home/image/title-appointment.png
pages/home/image/title-appointment.png
pages/home/image/title-appointment.png
pages/home/image/title-appointment.png
  • 2-up
  • Swipe
  • Onion skin
pages/home/image/title-guide.png
pages/home/image/title-guide.png

6.2 KB | W: | H:

pages/home/image/title-guide.png

1.95 KB | W: | H:

pages/home/image/title-guide.png
pages/home/image/title-guide.png
pages/home/image/title-guide.png
pages/home/image/title-guide.png
  • 2-up
  • Swipe
  • Onion skin
pages/home/image/title-strategy.png
pages/home/image/title-strategy.png

7.59 KB | W: | H:

pages/home/image/title-strategy.png

2.39 KB | W: | H:

pages/home/image/title-strategy.png
pages/home/image/title-strategy.png
pages/home/image/title-strategy.png
pages/home/image/title-strategy.png
  • 2-up
  • Swipe
  • Onion skin
pages/index/index.json
{ {
"disableScroll": true,
"navigationStyle": "custom", "navigationStyle": "custom",
"usingComponents": {} "usingComponents": {}
} }
\ No newline at end of file
pages/index/index.wxml
<navigation></navigation> <view class="container">
\ No newline at end of file <scroll-view scroll-y style="height: 800rpx">
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui</view>
<view>shui3333</view>
<view>shui2222</view>
<view>shui1111</view>
</scroll-view>
</view>
\ No newline at end of file
pages/index/index.wxss
.container{ .container {
width:100%; width:100%;
border: 1rpx red solid;
overflow: scroll;
background: green;
} }
.navigation-bar-image{ .navigation-bar-image{
......
pages/mine/image/mine.png
pages/mine/image/mine.png

101 KB | W: | H:

pages/mine/image/mine.png

17.4 KB | W: | H:

pages/mine/image/mine.png
pages/mine/image/mine.png
pages/mine/image/mine.png
pages/mine/image/mine.png
  • 2-up
  • Swipe
  • Onion skin
pages/play/play.js
...@@ -6,18 +6,23 @@ let logicData = { ...@@ -6,18 +6,23 @@ let logicData = {
} }
Page({ Page({
/**
* 页面的初始数据
*/
data: { data: {
navigationBackground: 'rgba(0, 0, 0, 0)', testData: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play-healthy.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play-healthy.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play-food.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play-healthy.png',
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play-healthy.png',
],
navigationBackground: 'rgba(0, 0, 0, 0)',
navigationFixed: false,
navigationFixedBoundary: 0,
banner: [ banner: [
'../../image/banner-0.png', './image/banner-0.png',
'../../image/banner-1.png', './image/banner-1.png',
'../../image/banner-2.png' './image/banner-2.png'
], ],
interval: 2000, interval: 2000,
duration: 1000, duration: 1000,
...@@ -27,7 +32,7 @@ Page({ ...@@ -27,7 +32,7 @@ Page({
tab: [ tab: [
{ {
'text': '文艺', 'text': '艺文',
'defaultImage': '/pages/play/image/literatue.png', 'defaultImage': '/pages/play/image/literatue.png',
'activeImage': '/pages/play/image/literatue-s.png', 'activeImage': '/pages/play/image/literatue-s.png',
}, { }, {
...@@ -35,11 +40,11 @@ Page({ ...@@ -35,11 +40,11 @@ Page({
'defaultImage': '/pages/play/image/healthy.png', 'defaultImage': '/pages/play/image/healthy.png',
'activeImage': '/pages/play/image/healthy-s.png', 'activeImage': '/pages/play/image/healthy-s.png',
}, { }, {
'text': '休闲', 'text': '美食',
'defaultImage': '/pages/play/image/food.png', 'defaultImage': '/pages/play/image/food.png',
'activeImage': '/pages/play/image/food-s.png', 'activeImage': '/pages/play/image/food-s.png',
}, { }, {
'text': '美食', 'text': '休闲',
'defaultImage': '/pages/play/image/relaxation.png', 'defaultImage': '/pages/play/image/relaxation.png',
'activeImage': '/pages/play/image/relaxation-s.png', 'activeImage': '/pages/play/image/relaxation-s.png',
}, { }, {
...@@ -51,9 +56,7 @@ Page({ ...@@ -51,9 +56,7 @@ Page({
tabIndex: 0, tabIndex: 0,
detailImage: [], detailImage: [],
detailImageUrl: [ detailImageUrl: [],
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play-healthy.png',
],
detailIndex: 0, detailIndex: 0,
}, },
...@@ -61,35 +64,18 @@ Page({ ...@@ -61,35 +64,18 @@ Page({
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad: function (options) { onLoad: function (options) {
this.setData({
detailImageUrl: [this.data.testData[0]]
})
this.downloadDetail(this.data.detailIndex) this.downloadDetail(this.data.detailIndex)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
onUnload: function () {
this.setData({
navigationFixedBoundary: 710 / 750 * wx.getSystemInfoSync().windowWidth
})
}, },
handleChange: function (e) { handleChange: function (e) {
this.setData({ this.setData({
currentIndex: e.detail.current currentIndex: e.detail.current,
}) })
}, },
...@@ -116,14 +102,33 @@ Page({ ...@@ -116,14 +102,33 @@ Page({
onTabSelection: function (funcEvent) { onTabSelection: function (funcEvent) {
this.setData({ this.setData({
tabIndex: funcEvent.currentTarget.dataset.index tabIndex: funcEvent.currentTarget.dataset.index,
detailImageUrl: [this.data.testData[funcEvent.currentTarget.dataset.index]]
}) })
this.downloadDetail(0)
}, },
onPageScroll: function(funcEvent) { onPageScroll: function(funcEvent) {
// console.log(funcEvent)
// 优化滚动事件触发频率 // 优化滚动事件触发频率
if (logicData.pageScrollLock) return // if (logicData.pageScrollLock) return
logicData.pageScrollLock = true // logicData.pageScrollLock = true
// 判断标签吸顶边距
console.log(funcEvent.scrollTop - this.data.navigationFixedBoundary)
if (funcEvent.scrollTop - this.data.navigationFixedBoundary > -20 && !this.data.navigationFixed) {
console.log('show')
this.setData({
navigationFixed: true
})
}
if (funcEvent.scrollTop - this.data.navigationFixedBoundary < -20 && this.data.navigationFixed) {
console.log('hidden')
this.setData({
navigationFixed: false
})
}
if (funcEvent.scrollTop > 40 && this.data.navigationBackground !== 'rgba(255, 255, 255, 1)') { if (funcEvent.scrollTop > 40 && this.data.navigationBackground !== 'rgba(255, 255, 255, 1)') {
...@@ -139,9 +144,9 @@ Page({ ...@@ -139,9 +144,9 @@ Page({
} }
// 恢复滚动事件 // 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () { // logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false // logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer) // clearTimeout(logicData.pageScrollTimer)
}, 40) // }, 20)
}, },
}) })
\ No newline at end of file
pages/play/play.wxml
...@@ -4,6 +4,20 @@ ...@@ -4,6 +4,20 @@
<!-- CapsuleBar 背景图片 --> <!-- CapsuleBar 背景图片 -->
<image class="navigation-bar-image" src="./image/title.png"></image> <image class="navigation-bar-image" src="./image/title.png"></image>
<!-- 吸顶板块标签 -->
<!-- <view class="tab tab-fixed row con-b align-c" hidden="{{!navigationFixed}}">
<block wx:for="{{tab}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="tab-item col con-c" data-index="{{index}}" bindtap="onTabSelection">
<view class="row con-c align-c {{tabIndex === index ? 'tab-item-active' : 'tab-item-inactive'}}">
<image src="{{tabIndex === index ? item.activeImage : item.defaultImage}}"></image>
</view>
<view class="row con-c align-c {{tabIndex === index ? 'tab-item-text-active' : 'tab-item-text-inactive'}}">
<text>{{item.text}}</text>
</view>
</view>
</block>
</view> -->
<!-- 以下部分放置页面内容 --> <!-- 以下部分放置页面内容 -->
<view class="banner"> <view class="banner">
<swiper autoplay circular interval="{{interval}}" next-margin="64rpx" bindchange="handleChange"> <swiper autoplay circular interval="{{interval}}" next-margin="64rpx" bindchange="handleChange">
...@@ -26,7 +40,7 @@ ...@@ -26,7 +40,7 @@
</view> </view>
<!-- 板块标签 --> <!-- 板块标签 -->
<view class="tab row con-b align-c"> <view class="tab row con-b align-c {{navigationFixed ? 'tab-fixed' : ''}}">
<block wx:for="{{tab}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{tab}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="tab-item col con-c" data-index="{{index}}" bindtap="onTabSelection"> <view class="tab-item col con-c" data-index="{{index}}" bindtap="onTabSelection">
<view class="row con-c align-c {{tabIndex === index ? 'tab-item-active' : 'tab-item-inactive'}}"> <view class="row con-c align-c {{tabIndex === index ? 'tab-item-active' : 'tab-item-inactive'}}">
...@@ -38,12 +52,13 @@ ...@@ -38,12 +52,13 @@
</view> </view>
</block> </block>
</view> </view>
<view class="tab-blank" hidden="{{!navigationFixed}}"></view>
<view class="detail"> <view class="detail">
<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>
<view class="detail-info col"> <!-- <view class="detail-info col">
<view class="detail-info-title"> <view class="detail-info-title">
<text>元养水韵SPA馆</text> <text>元养水韵SPA馆</text>
</view> </view>
...@@ -63,6 +78,6 @@ ...@@ -63,6 +78,6 @@
<view class="detail-operation"> <view class="detail-operation">
<l-button width="534" height="96" size="large">立即预定</l-button> <l-button width="534" height="96" size="large">立即预定</l-button>
</view> </view>
</view> </view> -->
</view> </view>
</view> </view>
\ No newline at end of file
pages/play/play.wxss
...@@ -80,6 +80,20 @@ swiper-item { ...@@ -80,6 +80,20 @@ swiper-item {
background: #ffffff; background: #ffffff;
} }
.tab-fixed {
z-index: 1900;
position: fixed;
top: 64px;
left: 0;
padding: 40rpx;
}
.tab-blank {
width: 750rpx;
height: 190rpx;
background: #ffffff;
}
.tab .tab-item-active { .tab .tab-item-active {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
...@@ -117,8 +131,8 @@ swiper-item { ...@@ -117,8 +131,8 @@ swiper-item {
/* 标签详情 */ /* 标签详情 */
.detail { .detail {
width: 750rpx; width: 750rpx;
padding-bottom: 90rpx; min-height: 500rpx;
background: #ebeff7; background: #fefefe;
} }
.detail image { .detail image {
......
wxss/samcss-layout.wxss
/* SAMCSS-layout */ /* SAMCSS-layout */
.prohibit-pull-down {
height: 100vh;
overflow: scroll;
}
.navigation { .navigation {
position: fixed; position: fixed;
top: 0; top: 0;
......
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