微信小程序 ---- 实现页面的tab滑动换页
html文件
{{item.name}}
{{shopname}}的{{topMenu[index].name}}（{{shopPhoto[index].length}}/20）
暂无相片
X
{{item.title||item.photo_name}}
编辑
当前还可添加
{{20-shopPhoto[index].length}} 张图片
{{editBtn}}
添加图片
为保证套餐信息规范，该相册目前只可查看，不可更改
相片名称：
css文件
page {
background: #f3f3f3;
}
.none {
margin: 400rpx auto;
}
.topBox {
height: 100rpx;
background: white;
line-height: 100rpx;
}
.topScroll {
width: 100%;
box-sizing: border-box;
background: white;
font-size: 30rpx;
}
.topMenu {
display: inline-block;
height: 60rpx;
padding-bottom: 20rpx;
margin: 0 35rpx;
}
.active {
color: rgb(254, 170, 50);
border-bottom: 5rpx solid rgb(254, 170, 50);
}
/* 导航栏下面的 */
.swiperBox {
background: #f3f3f3;
padding-bottom: 20rpx;
}
.swiperTopinfo {
font-size: 30rpx;
padding-left: 36rpx;
height: 64rpx;
line-height: 64rpx;
background: #f3f3f3;
}
.scoll-h {
height: 78%;
background: white;
}
.mag {
height: 100rpx;
}
.imgbox {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-self: center;
}
.info {
margin: 20rpx 15rpx 0 15rpx;
position: relative;
}
.delete {
position: absolute;
display: inline-block;
font-size: 18rpx;
width: 45rpx;
height: 35rpx;
line-height: 30rpx;
border-bottom-left-radius: 50rpx;
right: 0;
background: red;
color: white;
text-align: center;
}
.img {
width: 214rpx;
height: 190rpx;
}
.function {
margin-top: 10rpx;
display: flex;
align-items: center;
flex-direction: column;
font-size: 26rpx;
justify-content: space-between;
}
.photoName {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 214rpx;
}
.editPhotoName {
margin-left: auto;
color: rgb(254, 170, 50);
}
.editPhotoName {
margin-left: auto;
color: rgb(254, 170, 50);
}
.edit{
color: rgb(254, 170, 50);
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.tip {
padding: 20rpx 0 20rpx 36rpx;
font-size: 28rpx;
padding-left: 36rpx;
background: white;
}
.btnGroup {
display: flex;
flex-direction: row;
background: #f3f3f3;
}
.btnGroup view {
width: 334rpx;
border-radius: 12rpx;
text-align: center;
font-size: 28rpx;
line-height: 80rpx;
height: 80rpx;
background: rgb(255, 226, 82);
margin: 20rpx auto 0 auto;
transition: all 2s;
}
.disInfo {
padding-left: 36rpx;
font-size: 30rpx;
color: rgb(123, 123, 123);
margin: 20rpx auto 0 auto;
background: #f3f3f3;
}
.modalInfo {
color: black;
display: flex;
flex-direction: row;
align-items: center;
}
js文件（将后台返回给的数据储存在本地页面数据中，可以减少后台的访问量，从而减轻后台负重，当对页面数据进行后台更改时在重新获取数据即可）
// pages/myInfo/photo/photo.js
var app = getApp();
Page({
data: {
currentTab: 0,
topMenu: [{
name: "菜品相册"
}, {
name: "环境相册"
}],
shopPhoto: [],
goodsPhoto: [],
environmentPhoto: [],
img: [],
editHidden: true,
editValue: "",
editItemID: 0,
delShow: true,
editBtn: "编辑相册"
},
onShow() {
this.getSysteminfo();
this.getGoodsPhoto();
this.getenvironmentPhoto();
},
//获取手机高度
getSysteminfo: function() {
var that = this
wx.getSystemInfo({
success: function(res) {
console.log(res)
var clientHeight = res.windowHeight,
clientWidth = res.windowWidth,
rpxR = 750 / clientWidth;
var calc = clientHeight * rpxR - 120;
console.log(calc)
that.setData({
winHeight: calc,
shopname: app.data.shop.name
});
}
});
},
//根据导航和滑动现实对应内容
//滑动切换样式
switchTab: function(e) {
this.setData({
currentTab: e.detail.current
});
this.setPhoto(e.detail.current)
},
// 点击标题切换当前页时改变样式
swichNav: function(e) {
var cur = e.target.dataset.current;
if (this.data.currentTab == cur) {
return false;
} else {
this.setData({
currentTab: cur
})
}
this.setPhoto(cur)
},
//设置在本地保存的图片谁显示
setPhoto: function(id) {
this.setData({
img: []
})
var img = this.data.img
var shop = this.data.shopPhoto
for (var i = 0; i < shop[id].length; i++) {
img[i] = shop[id][i].img_url
}
this.setData({
img: img
})
},
//从后台获取相片保存在页面，减少访问量
getGoodsPhoto: function() {
app.net.GetThen({
url: app.url.getGoodsPhoto,
data: {
shop_id: app.data.shop.id
}
}).then(res => {
var data = res.data.data
var shop = this.data.shopPhoto;
shop[0] = data
this.setData({
shopPhoto: shop,
})
this.setPhoto(0)
console.log(this.data.shopPhoto)
})
},
//获取环境图片
getenvironmentPhoto: function() {
app.net.GetThen({
url: app.url.getShopPhoto,
data: {
shop_id: app.data.shop.id
}
}).then(res => {
var data = res.data.data
var shop = this.data.shopPhoto;
shop[1] = data
this.setData({
shopPhoto: shop,
})
console.log(this.data.shopPhoto)
})
},
//点击看大图
checkImg: function(e) {
console.log(e)
wx.previewImage({
current: e.currentTarget.dataset.index,
urls: this.data.img,
})
},
//修改图片名
editPhotoName: function(e) {
this.setData({
editItemID: e.currentTarget.dataset.item.id,
photoName: e.currentTarget.dataset.item.photo_name,
editHidden: false
})
},
//图片名输入
editInput: function(e) {
this.setData({
editValue: e.detail.value
})
},
//点击取消
editCancel: function() {
this.setData({
editHidden: true,
photoName: "",
editValue: ""
})
},
//点击确定 修改名字 并重新获取信息
editConfirm: function(e) {
console.log(this.data.editItemID)
console.log(this.data.editValue)
app.net.PostThen({
url: app.url.updatePhoto,
data: {
id: this.data.editItemID,
photo_name: this.data.editValue
}
}).then(res => {
console.log(res)
if (res.data.code == 200) {
this.setData({
editHidden: true,
editValue: ""
})
wx.showToast({
title: '修改成功',
duration: 2000
})
this.getenvironmentPhoto()
this.setPhoto(1)
}
})
},
//编辑相册
editAlbum: function() {
var del=this.data.delShow
if(!del){
this.setData({
editBtn:"编辑相册"
})
}else{
this.setData({
editBtn:"取消编辑"
})
}
this.setData({
delShow: !this.data.delShow
})
},
//点击删除图片
onDelPhone: function(e) {
console.log(e)
var that=this
wx.showModal({
title: "删除",
content: "你确定要删除" + e.currentTarget.dataset.item.photo_name + "?",
success: function(res) {
console.log(res)
if (res.confirm) {
app.net.PostThen({
url: app.url.deletePhoto,
data: {
photoId: e.currentTarget.dataset.item.id
}
}).then(res => {
console.log(res)
that.getenvironmentPhoto()
wx.showToast({
title: '删除成功',
duration:2000,
})
})
}
}
})
},
onAddPhoto:function(){
wx.navigateTo({
url: "/pages/myInfo/photo/addPhoto/addPhoto",
})
}
})