Browse Source

添加自定义导航栏,引用dialog组件,修改布局

TODO:添加一个按钮可以跳转最上方
master
Naomi 8 months ago
parent
commit
37bcd5557c
10 changed files with 157 additions and 27 deletions
  1. +2
    -2
      app.js
  2. +9
    -6
      app.json
  3. BIN
      images/back.png
  4. +54
    -1
      pages/album/album.js
  5. +6
    -1
      pages/album/album.json
  6. +25
    -5
      pages/album/album.wxml
  7. +56
    -3
      pages/album/album.wxss
  8. +1
    -5
      pages/index/index.json
  9. +2
    -2
      pages/index/index.wxss
  10. +2
    -2
      project.config.json

+ 2
- 2
app.js View File

@ -1,4 +1,4 @@
var cc = require('./lib/cos.js');
var cos = require('./lib/cos.js');
const app = getApp();
App({
@ -10,7 +10,7 @@ App({
* 当小程序初始化完成时会触发 onLaunch全局只触发一次
*/
onLaunch: function () {
this.globalData.tmp = cc.get();
this.globalData.tmp = cos.get();
},
/**


+ 9
- 6
app.json View File

@ -1,13 +1,16 @@
{
"pages": [
"pages/index/index",
"pages/preview/preview",
"pages/album/album"
"pages/album/album",
"pages/preview/preview"
],
"window": {
"navigationBarTitleText": "Naomi 相册",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#373b3e"
"navigationBarBackgroundColor": "#9dbdc6",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Naomi 相册"
},
"sitemapLocation": "sitemap.json"
"sitemapLocation": "sitemap.json",
"useExtendedLib": {
"weui": true
}
}

BIN
images/back.png View File

Before After
Width: 51  |  Height: 83  |  Size: 859 B

+ 54
- 1
pages/album/album.js View File

@ -55,6 +55,16 @@ Page({
// 切换动画的时间
slideDuration: 400,
// 状态栏高度
statusBarHeight: wx.getStorageSync('statusBarHeight') + 'px',
// 导航栏高度
navigationBarHeight: wx.getStorageSync('navigationBarHeight') + 'px',
// 胶囊按钮高度
menuButtonHeight: wx.getStorageSync('menuButtonHeight') + 'px',
// 导航栏和状态栏高度
navigationBarAndStatusBarHeight: wx.getStorageSync('statusBarHeight') +
wx.getStorageSync('navigationBarHeight') + 3 + 'px'
},
onShareAppMessage: function (res) {
return {
@ -105,6 +115,32 @@ Page({
onLoad() {
var self = this;
const {
statusBarHeight,
platform
} = wx.getSystemInfoSync()
const {
top,
height
} = wx.getMenuButtonBoundingClientRect()
// 状态栏高度
wx.setStorageSync('statusBarHeight', statusBarHeight)
// 胶囊按钮高度 一般是32 如果获取不到就使用32
wx.setStorageSync('menuButtonHeight', height ? height : 32)
// 判断胶囊按钮信息是否成功获取
if (top && top !== 0 && height && height !== 0) {
const navigationBarHeight = (top - statusBarHeight) * 2 + height
// 导航栏高度
wx.setStorageSync('navigationBarHeight', navigationBarHeight)
} else {
wx.setStorageSync(
'navigationBarHeight',
platform === 'android' ? 48 : 40
)
}
this.getAlbumDir();
this.renderAlbumList();
this.getAlbumList(function (list) {
@ -120,6 +156,23 @@ Page({
});
},
tapBackButton() {
this.setData({
back: true
})
},
confirmBack(e) {
if (e.detail.item.text == "取消")
this.setData({
back: false
})
else if (e.detail.item.text == "确认")
wx.navigateBack({
delta: 1,
})
},
getAlbumDir() {
let that = this;
cos.getBucket({
@ -187,7 +240,7 @@ Page({
imageList.unshift({
type: 'add'
});
layoutList = listToMatrix(imageList, layoutColumnSize, this.data.marker);
this.setData({


+ 6
- 1
pages/album/album.json View File

@ -1 +1,6 @@
{}
{
"navigationStyle":"custom",
"usingComponents": {
"mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
}
}

+ 25
- 5
pages/album/album.wxml View File

@ -1,5 +1,19 @@
<view class="navigation-container" style="{{'height: ' + navigationBarAndStatusBarHeight}}">
<!--空白来占位状态栏-->
<view style="{{'height: ' + statusBarHeight}}"></view>
<!--自定义导航栏-->
<view class="navigation-bar" style="{{'height:' + navigationBarHeight}}">
<view bindtap="tapBackButton" class="navigation-buttons" style="{{'height:' + menuButtonHeight}}">
<image class="nav-img" src='/images/back.png' />
</view>
<view class="navigation-title" style="{{'line-height:' + navigationBarHeight}}">云相册</view>
</view>
</view>
<!--空白占位,占用空出的位置-->
<view style="{{'height: ' + navigationBarAndStatusBarHeight}}; background: #ffffff"></view>
<scroll-view class="container" scroll-y="true" style="display: {{!preview ? 'block' : 'none'}};">
<view class="upload-tips" style="position:fixed;bottom:0;display:flex;width:100%;justify-content:center;right:-27rpx;">长按图片可弹出选项</view>
<!-- <view class="upload-tips" style="position:fixed;bottom:0;display:flex;width:100%;justify-content:center;right:-27rpx;">长按图片可弹出选项</view> -->
<checkbox-group class="upload-tips" style="position:absolute;right:15rpx;" bindchange="checkboxChange">
<checkbox value="deepFold">深度遍历</checkbox>
</checkbox-group>
@ -16,6 +30,7 @@
<block wx:if="{{item.type==='add'}}">
<view class="upload-add-outer">
<view class="upload-add" bindtap="chooseImage">
<a class="tips">可点击或长按图片</a>
<image src="/images/camera.png" mode="aspectFit"></image>
<text>上传图片</text>
</view>
@ -39,7 +54,7 @@
<view class="upload-add-outer">
<view class="upload-add">
<image src="/images/done.png" mode="aspectFit"></image>
<text>没有更多图片</text>
<text style="font-size:36rpx;">没有更多图片</text>
</view>
</view>
</block>
@ -56,17 +71,22 @@
<swiper class="swiper-container" duration="{{slideDuration}}" current="{{previewIndex}}" bindtap="leavePreviewMode" style="display: {{previewMode ? 'block' : 'none'}};">
<block wx:for="{{albumList}}" wx:for-item="item" wx:key="item">
<swiper-item>
<image wx:if="{{previewMode}}" lazy-load="true" src="{{item + '!weixin'}}" mode="aspectFit"></image>
<image wx:if="{{previewMode}}" data-src="{{item}}" bindlongpress="showActions" lazy-load="true" src="{{item + '!weixin'}}" mode="aspectFit"></image>
</swiper-item>
</block>
</swiper>
<action-sheet hidden="{{!showActionsSheet}}" bindchange="hideActionSheet">
<action-sheet-item bindtap="copyLink">复制链接</action-sheet-item>
<action-sheet-item bindtap="copyLink">复制图片链接</action-sheet-item>
<action-sheet-item bindtap="downloadImage">保存到本地</action-sheet-item>
<!-- <action-sheet-item class="warn" bindtap="deleteImage">删除图片</action-sheet-item> -->
<action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
<loading hidden="{{!showLoading}}" bindchange="hideLoading">{{loadingMessage}}</loading>
<toast hidden="{{!showToast}}" duration="1000" bindchange="hideToast">{{toastMessage}}</toast>
<toast hidden="{{!showToast}}" duration="1000" bindchange="hideToast">{{toastMessage}}</toast>
<mp-dialog title="返回首页" show="{{back}}" bindbuttontap="confirmBack" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
<image src="/images/done.png" style="width:50px;height:50px;"/>
<view>真的要回去吗?</view>
</mp-dialog>

+ 56
- 3
pages/album/album.wxss View File

@ -78,7 +78,7 @@
left: 0;
width: 240rpx;
height: 2.6rem;
top: 1.2rem;
top: 1.5rem;
}
.upload-add text {
@ -86,7 +86,16 @@
width: 240rpx;
height: 2rem;
left: 0;
top: 1.6rem;
top: 1.8rem;
color: #888;
}
.tips {
position: absolute;
width: 240rpx;
left: 0;
top: -2.4rem;
font-size: 24rpx;
color: #888;
}
@ -127,7 +136,7 @@
top: 0;
width: 100%;
height: 100%;
background: #000;
background: #272f32;
}
.swiper-container image {
@ -137,4 +146,48 @@
action-sheet-item.warn {
color: #e64340;
}
/* navigationBar.wxss */
.navigation-container {
position: absolute;
width: 100%;
z-index: 99;
top: 0;
left: 0;
background-color: #9dbdc6;
}
.navigation-bar {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.navigation-buttons {
position: absolute;
align-items: center;
top: 24rpx;
left: 30rpx;
background-color: transparent;
}
.nav-img {
height: 24px;
width: 15px;
}
.navigation-title {
position: absolute;
left: 104rpx;
right: 104rpx;
top: 5rpx;
text-align: center;
font-size: 17px;
font-weight: bold;
color: #272f32;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

+ 1
- 5
pages/index/index.json View File

@ -1,5 +1 @@
{
"navigationBarBackgroundColor": "#2277da",
"navigationBarTextStyle": "white",
"backgroundColor": "white"
}
{}

+ 2
- 2
pages/index/index.wxss View File

@ -23,8 +23,8 @@
width: 100%;
height: 85rpx;
line-height: 85rpx;
background-color: #fff;
color: #2277da;
background-color: #eff3f5;
color: #f5756c;
line-height: 85rpx;
}


+ 2
- 2
project.config.json View File

@ -3,7 +3,7 @@
"setting": {
"urlCheck": true,
"es6": true,
"enhance": true,
"enhance": false,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
@ -29,7 +29,7 @@
"packNpmRelationList": []
},
"compileType": "miniprogram",
"libVersion": "2.11.3",
"libVersion": "2.12.0",
"appid": "wxfbc5db33bd702838",
"projectname": "naomi-album",
"isGameTourist": false,


Loading…
Cancel
Save