微信小程序 ---- 实现页面的tab滑动换页

html文件

<view class="topBox">
  <scroll-view scoll-x="true" class='topScroll'>
    <block wx:for="{{topMenu}}" wx:for-item="item" wx:key="index">
      <view class="topMenu {{currentTab==index?'active':''}}" data-current="{{index}}" bindtap="swichNav">{{item.name}}</view>
    </block>
  </scroll-view>
</view>
<view class='swiperBox'>
  <swiper style="height:{{winHeight}}rpx" current="{{currentTab}}" duration='200' bindchange='switchTab' circular>
    <swiper-item wx:for="{{topMenu}}" wx:for-item="item" wx:key="index">
      <view class='swiperTopinfo'>{{shopname}}的{{topMenu[index].name}}（{{shopPhoto[index].length}}/20）</view>
      <scroll-view scroll-y class='scoll-h'>
        <view class='imgbox'>
          <block wx:if="{{shopPhoto[index].length==0}}">
            <view class='none'>暂无相片</view>
          </block>
          <block wx:else>
            <block wx:for="{{shopPhoto[index]}}" wx:for-item="item" wx:key="cindex">
              <view class='info'>
                <image src='{{item.img_url}}' mode="aspectFill" bindtap='checkImg' data-index="{{item.img_url}}" class='img'></image>
                <block wx:if="{{currentTab==1}}">
                  <view class='delete' hidden='{{delShow}}' bindtap='onDelPhone' data-item="{{item}}">X</view>
                </block>
                <view class="function">
                  <view class='photoName'>{{item.title||item.photo_name}}</view>
                  <block wx:if="{{currentTab==1}}">
                    <view class='editPhotoName' bindtap='editPhotoName' data-item="{{item}}">编辑</view>
                  </block>
                </view>
              </view>
            </block>
          </block>
        </view>
      </scroll-view>
      <view class='tip'>当前还可添加
        <text>{{20-shopPhoto[index].length}}</text>张图片</view>
      <block wx:if="{{index==1}}">
        <view class='btnGroup'>
          <view bindtap='editAlbum'>{{editBtn}}</view>
          <view bindtap='onAddPhoto'>添加图片</view>
        </view>
      </block>
      <block wx:else>
        <view class='disInfo'>为保证套餐信息规范，该相册目前只可查看，不可更改</view>
      </block>
    </swiper-item>
  </swiper>
</view>

<modal title="修改名字" hidden="{{editHidden}}" bindconfirm="editConfirm" bindcancel="editCancel">
  <view class='modalInfo'>
    相片名称：
    <input placeholder='{{photoName}}' value='{{editValue}}' bindinput="editInput"></input>
  </view>
</modal>

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",
    })
  }




})