Skip to content

严立 / mini-shimao

Go to a project
Commit c649cc7d by 严立
Options

初版静态

parent a6ad1c9c
Inline Side-by-side
Showing with 344 additions and 196 deletions
app.json
{
"pages": [
"pages/mine/mine",
"pages/home/home",
"pages/play/play",
"pages/home-strategy/home-strategy",
"pages/home/home",
"pages/index/index",
"pages/mine/mine",
"pages/home-strategy/home-strategy",
"pages/campsite/campsite"
......
component/navigation/navigation.js
......@@ -50,9 +50,9 @@ Component({
lifetimes: {
attached: function(){
var that = this;
that.setNavSize();
that.setStyle();
var that = this
that.setNavSize()
that.setStyle()
},
},
......@@ -60,26 +60,50 @@ 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
, sysinfo = wx.getSystemInfoSync()
, statusHeight = sysinfo.statusBarHeight
, isiOS = sysinfo.system.indexOf('iOS') > -1
, navHeight;
if (!isiOS) {
navHeight = 48;
} else {
let sysinfo = wx.getSystemInfoSync()
let statusHeight = sysinfo.statusBarHeight
let isIOS = sysinfo.system.indexOf('iOS') > -1
let navHeight
if (isIOS) {
navHeight = 44;
} else {
navHeight = 48;
}
that.setData({
status: statusHeight,
navHeight: navHeight
})
wx.setStorageSync('navigationHeight', this.data.status + this.data.navHeight)
console.log(wx.getStorageSync('navigationHeight'))
that.getHeight()
},
setStyle: function() {
console.log('setStyle')
var that = this, containerStyle, textStyle, iconStyle;
containerStyle = [
'background:' + that.data.background
......
component/navigation/navigation.wxml
<view class='nav' style='height: {{status + navHeight}}px'>
<view class='status' style='height: {{status}}px;{{containerStyle}}'></view>
<view class='navbar' style='height:{{navHeight}}px;{{containerStyle}}'>
<view id="status" class='status' style='height: {{status}}px;{{containerStyle}}'></view>
<view id="navbar" class='navbar' style='height:{{navHeight}}px;{{containerStyle}}'>
<view class='back-icon' wx:if="{{backIcon}}" bindtap='back'>
<image src='{{backIcon}}'></image>
</view>
......
component/navigation/navigation.wxss
.nav {
z-index: 2000;
/* position: fixed;
top: 0;
left: 0;
border: 1rpx red solid; */
}
.status {
background: red;
}
.navbar {
background: green;
}
.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 = {
}
Page({
/**
* 页面的初始数据
*/
data: {
navigationBackground: 'rgba(0, 0, 0, 0)',
banner: [
'../../image/banner-0.png',
'../../image/banner-1.png',
'../../image/banner-2.png'
testData: [
{
banner: [
'./image/1-banner-1.png',
'./image/1-banner-2.png',
'./image/1-banner-3.png',
],
title: '碧海银湖里的自然系饮食 | 原味舒食',
content: 'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home-strategy-1.png',
relation: [
{
'cover': '/image/strategy-1.png',
'title': '原味舒食生态餐厅原味舒',
'time': '营业时间 10:00-17:00',
'price': '¥20-¥50/人',
'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: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/home-strategy.png',
],
detailImageUrl: [],
detailIndex: 0,
relation: [
{
'cover': '/image/strategy-0.png',
'title': '元养水韵SPA馆',
'time': '营业时间 12:00-14:00',
'price': '¥10-¥5000/人',
'describe': '',
}, {
'cover': '/image/strategy-1.png',
'title': '原味舒食生态餐厅原味舒',
'time': '营业时间 10:00-17:00',
'price': '¥20-¥50/人',
'describe': '',
},
]
relation: []
},
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)
},
......
pages/home-strategy/home-strategy.wxml
......@@ -25,7 +25,9 @@
</view>
<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-title">
......
pages/home/component/strategy-item/strategy-item.wxss
......@@ -13,7 +13,7 @@
.component-strategy-item-title {
display: -webkit-box;
margin: 24rpx;
margin: 24rpx 20rpx;
font-size: 26rpx;
font-weight: bolder;
color: #000000;
......
pages/home/home.js
......@@ -7,6 +7,12 @@ let logicData = {
Page({
data: {
imitateScrollBase: 0, // 滑动起始位置
imitateScrollLocation: 0, // 当前位置
imitateScrollPageHeight: 0, // 页面整体高度
imitateScrollSmoothness: 2, // 滚动速率
navigationStyle: 'position: absolute; top: -navigationHeightrpx; left: 0;',
navigationAnimationShow: 0,
......@@ -22,27 +28,33 @@ Page({
bannerHeight: 300,
strategyList: [{
image: '/pages/home/image/strategy-00.png',
title: '碧海银湖40万方海岛精灵乐园，秘境度假中心。',
date: '2020-07-10'
}, {
id: '1',
image: '/pages/home/image/strategy-01.png',
title: '仲夏夜狂欢，体验滨海度假趣味生活！！',
title: '碧海银湖里的自然系饮食|原味舒食。',
date: '2020-07-10'
}, {
id: '2',
image: '/pages/home/image/strategy-02.png',
title: '盛放的海岛秘境，全家人敞开玩的度假胜地之选，后面的内容巴拉巴拉。',
title: '漫游海岛奇境，搞定熊孩子的理想国约12000平方米',
date: '2020-07-10'
}, {
id: '3',
image: '/pages/home/image/strategy-03.png',
title: '周末给不了你的快乐，40万方超级乐园给你尽情玩耍。',
title: '盛放的海岛秘境，全家人敞开玩的度假胜地之选，后面的内容巴拉巴拉。',
date: '2020-07-10'
}, {
id: '4',
image: '/pages/home/image/strategy-04.png',
title: '这里的蓝真的舒服，美好的微风吹得让人沉醉了，躺下了。',
title: '周末给不了你的快乐，40万方超级乐园给你尽情玩耍。',
date: '2020-07-10'
}, {
id: '5',
image: '/pages/home/image/strategy-05.png',
title: '这里的蓝真的舒服，美好的微风吹得让人沉醉了，躺下了。',
date: '2020-07-10'
}, {
id: '6',
image: '/pages/home/image/strategy-06.png',
title: '懂生活的你，必定喜欢懂品质的碧海银湖。',
date: '2020-07-10'
}],
......@@ -55,23 +67,24 @@ Page({
// wx.hideTabBar()
// wx.showTabBar()
const query = wx.createSelectorQuery()
query.select('#banner').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec((res) => {
this.setData({
bannerHeight: res[0].height * 0.9
})
wx.getSystemInfo({
success: (result) => {
console.log(result)
this.setData({
imitateScrollPageHeight: result.screenHeight
})
},
})
},
onStrategyDetail: function (funcItem) {
console.log(funcItem)
console.log(funcItem.detail.item.id)
wx.navigateTo({
url: '/pages/home-strategy/home-strategy'
url: '/pages/home-strategy/home-strategy?id=' + funcItem.detail.item.id
})
},
onPageScroll: function(funcEvent) {
console.log('onPageScroll')
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
......
pages/home/home.json
{
"disableScroll": true,
"usingComponents": {
"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">
<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>
<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-b.png" hidden="{{isNavigationLogoWhite}}"></image>
<view id="banner" class="banner">
<swiper autoplay circular class="banner-swiper" style="{{navigationStyle}}" indicator-dots="{{true}}" interval="2000" duration="500" 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>
</swiper-item>
</block>
</swiper>
<view id="banner" class="banner">
<swiper autoplay circular class="banner-swiper" style="{{navigationStyle}}" indicator-dots="{{true}}" interval="2000" duration="500" 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>
</swiper-item>
</block>
</swiper>
<view class="banner-swiper-point">
<swiper-point bannerActiveIndex="{{bannerIndex}}"></swiper-point>
</view>
<view class="banner-wave">
<image src="/image/ornament-0.png" mode="widthFix"></image>
</view>
<view class="banner-swiper-point">
<swiper-point bannerActiveIndex="{{bannerIndex}}"></swiper-point>
</view>
<view class="banner-wave">
<image src="/image/ornament-0.png" mode="widthFix"></image>
</view>
<view class="banner-notice">
<l-list l-class="banner-notice-item" title="温泉公寓现已接受预定" image="/pages/home/image/inform.png"></l-list>
</view>
<view class="banner-notice">
<l-list l-class="banner-notice-item" title="温泉公寓现已接受预定" image="/pages/home/image/inform.png"></l-list>
</view>
</view>
<view class="detail">
<!-- 预约公告 -->
<view class="night row con-b">
<view>
<view class="title row align-c">
<image src="./image/night.png"></image>
<text>夜间入园预约</text>
</view>
<view class="describe">
<text>20:00后入园需提前预约，每日限流200人</text>
</view>
<view class="detail">
<!-- 预约公告 -->
<view class="night row con-b">
<view>
<view class="title row align-c">
<image src="./image/night.png"></image>
<text>夜间入园预约</text>
</view>
<view>
<l-list title="去预约" l-class="list" l-content-class="list-title"></l-list>
<view class="describe">
<text>20:00后入园需提前预约，每日限流200人</text>
</view>
</view>
<view>
<l-list title="去预约" l-class="list" l-content-class="list-title"></l-list>
</view>
</view>
<!-- 智慧导览 -->
<view class="guide detail-item">
<image src="./image/title-guide.png"></image>
<view class="guide-content">
<image class="background-image" src="./image/guide.png" mode="aspectFit"></image>
<view class="operation col">
<text>探索精彩去处</text>
<button>进入电子地图</button>
</view>
<!-- 智慧导览 -->
<view class="guide detail-item">
<image src="./image/title-guide.png"></image>
<view class="guide-content">
<image class="background-image" src="./image/guide.png" mode="aspectFit"></image>
<view class="operation col">
<text>探索精彩去处</text>
<button>进入电子地图</button>
</view>
</view>
</view>
<!-- 预约看房 -->
<view class="appointment detail-item">
<image src="./image/title-appointment.png"></image>
<view class="appointment-content">
<image class="background-image" src="./image/appointment.png" mode="aspectFit"></image>
<view class="operation col">
<text>温泉公寓</text>
<text>体验海洋温泉，享受湿地与海景双重景观</text>
<button>立即预约</button>
</view>
<!-- 预约看房 -->
<view class="appointment detail-item">
<image src="./image/title-appointment.png"></image>
<view class="appointment-content">
<image class="background-image" src="./image/appointment.png" mode="aspectFit"></image>
<view class="operation col">
<text>温泉公寓</text>
<text>体验海洋温泉，享受湿地与海景双重景观</text>
<button>立即预约</button>
</view>
</view>
</view>
<!-- 游客攻略 -->
<view class="strategy detail-item">
<image src="./image/title-strategy.png"></image>
<view class="strategy-content">
<image class="background-image" src="./image/strategy.png" mode="aspectFit"></image>
<view class="operation col">
<text>凉爽一夏，在银湖湾听海踏浪</text>
</view>
<!-- 游客攻略 -->
<view class="strategy detail-item">
<image src="./image/title-strategy.png"></image>
<view class="strategy-content">
<image class="background-image" src="./image/strategy.png" mode="aspectFit"></image>
<view class="operation col">
<text>凉爽一夏，在银湖湾听海踏浪</text>
</view>
</view>
<view>
<l-water-flow column-gap="14rpx" generic:l-water-flow-item="strategy-item" bind:linitemtap="onStrategyDetail"></l-water-flow>
</view>
</view>
<view>
<l-water-flow column-gap="14rpx" generic:l-water-flow-item="strategy-item" bind:linitemtap="onStrategyDetail"></l-water-flow>
</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
{
"navigationStyle": "custom",
"usingComponents": {}
"disableScroll": true,
"navigationStyle": "custom",
"usingComponents": {}
}
\ No newline at end of file
pages/index/index.wxml
<navigation></navigation>
\ No newline at end of file
<view class="container">
<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%;
border: 1rpx red solid;
overflow: scroll;
background: green;
}
.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 = {
}
Page({
/**
* 页面的初始数据
*/
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: [
'../../image/banner-0.png',
'../../image/banner-1.png',
'../../image/banner-2.png'
'./image/banner-0.png',
'./image/banner-1.png',
'./image/banner-2.png'
],
interval: 2000,
duration: 1000,
......@@ -27,7 +32,7 @@ Page({
tab: [
{
'text': '文艺',
'text': '艺文',
'defaultImage': '/pages/play/image/literatue.png',
'activeImage': '/pages/play/image/literatue-s.png',
}, {
......@@ -35,11 +40,11 @@ Page({
'defaultImage': '/pages/play/image/healthy.png',
'activeImage': '/pages/play/image/healthy-s.png',
}, {
'text': '休闲',
'text': '美食',
'defaultImage': '/pages/play/image/food.png',
'activeImage': '/pages/play/image/food-s.png',
}, {
'text': '美食',
'text': '休闲',
'defaultImage': '/pages/play/image/relaxation.png',
'activeImage': '/pages/play/image/relaxation-s.png',
}, {
......@@ -51,9 +56,7 @@ Page({
tabIndex: 0,
detailImage: [],
detailImageUrl: [
'https://image-1256588539.cos.ap-shanghai.myqcloud.com/miniapp/play-healthy.png',
],
detailImageUrl: [],
detailIndex: 0,
},
......@@ -61,35 +64,18 @@ Page({
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
detailImageUrl: [this.data.testData[0]]
})
this.downloadDetail(this.data.detailIndex)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
onUnload: function () {
this.setData({
navigationFixedBoundary: 710 / 750 * wx.getSystemInfoSync().windowWidth
})
},
handleChange: function (e) {
this.setData({
currentIndex: e.detail.current
currentIndex: e.detail.current,
})
},
......@@ -116,14 +102,33 @@ Page({
onTabSelection: function (funcEvent) {
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) {
// console.log(funcEvent)
// 优化滚动事件触发频率
if (logicData.pageScrollLock) return
logicData.pageScrollLock = true
// if (logicData.pageScrollLock) return
// 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)') {
......@@ -139,9 +144,9 @@ Page({
}
// 恢复滚动事件
logicData.pageScrollTimer = setTimeout(function () {
logicData.pageScrollLock = false
clearTimeout(logicData.pageScrollTimer)
}, 40)
// logicData.pageScrollTimer = setTimeout(function () {
// logicData.pageScrollLock = false
// clearTimeout(logicData.pageScrollTimer)
// }, 20)
},
})
\ No newline at end of file
pages/play/play.wxml
......@@ -4,6 +4,20 @@
<!-- CapsuleBar 背景图片 -->
<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">
<swiper autoplay circular interval="{{interval}}" next-margin="64rpx" bindchange="handleChange">
......@@ -26,7 +40,7 @@
</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">
<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'}}">
......@@ -38,12 +52,13 @@
</view>
</block>
</view>
<view class="tab-blank" hidden="{{!navigationFixed}}"></view>
<view class="detail">
<block wx:for="{{detailImageUrl}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<image mode="widthFix" src="{{item}}"></image>
</block>
<view class="detail-info col">
<!-- <view class="detail-info col">
<view class="detail-info-title">
<text>元养水韵SPA馆</text>
</view>
......@@ -63,6 +78,6 @@
<view class="detail-operation">
<l-button width="534" height="96" size="large">立即预定</l-button>
</view>
</view>
</view> -->
</view>
</view>
\ No newline at end of file
pages/play/play.wxss
......@@ -80,6 +80,20 @@ swiper-item {
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 {
width: 100rpx;
height: 100rpx;
......@@ -117,8 +131,8 @@ swiper-item {
/* 标签详情 */
.detail {
width: 750rpx;
padding-bottom: 90rpx;
background: #ebeff7;
min-height: 500rpx;
background: #fefefe;
}
.detail image {
......
wxss/samcss-layout.wxss
/* SAMCSS-layout */
.prohibit-pull-down {
height: 100vh;
overflow: scroll;
}
.navigation {
position: fixed;
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