微信小程序之点击图片滑动到相应内容

 js如下：

const app = getApp();
var zooname = "";
var paiImgSrc="";
var paiIntro="";
var paiName="";
var defaultimg ="";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    paiArr:[],
    currentTab: 0, //预设当前项的值
    scrollLeft: 0, //切换栏的滚动条位置
    paiImgSrc: '',  //存储图
    paiIntro:'',
    paiName:'',
    zooname: ''
  },
  //点击切换
  swichNav: function (e) {
    var that = this,
      cur = e.target.dataset.current,
      src = e.target.dataset.src,
      intro = e.target.dataset.intro,
      name = e.target.dataset.name;
    if (that.data.currentTaB == cur) {
      return false;
    } else {
      that.setData({
        currentTab: cur
      })
    }
    that.setData({
      paiImgSrc: src,
      paiIntro:intro,
      paiName:name
    })
    that.checkPage();
  },
  //判断超过一页时
  checkPage: function (e) {
    var that = this;
    if (that.data.currentTab > 2) {
      that.setData({
        scrollLeft: 300
      })
    } else {
      that.setData({
        scrollLeft: 0
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    zooname = app.globalData.zooname;
    wx.request({
      url: 'http://localhost:8082/zoo/selectAllPai',
      data: {
        zooname:zooname
      },
      header: {
        'content-type': 'application/json'
      },
      success: res => {
        console.log(res.data)
        this.setData({
          //第一个data为固定用法
          list2: res.data,
          paiArr:res.data,
          //默认显示第一个
          paiImgSrc: res.data[0].paiimg,
          paiIntro: res.data[0].paiintro,
          paiName: res.data[0].painame
        })
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxml如下：

<view class='context'>
  <view class='head'>
    <view class='imgshow'>
      <image class='img'  mode='scaleToFill' src='{{paiImgSrc}}' />
    </view>
    <view class="name">
        {{paiName}}
      </view>
  </view>
  <view class='imglist'>
    <scroll-view scroll-x="true" class="lists" scroll-left="{{scrollLeft}}">
        <block wx:for="{{paiArr}}" wx:key="key" wx:for-index="key" wx:for-item="item">
          <view class="items {{currentTab==key?'cur':''}}"  >
            <image class='img' mode="widthFix" data-current="{{key}}"  src='{{item.paiimg}}' data-id="{{item.paiid}}" data-src="{{item.paiimg}}" data-name="{{item.painame}}" data-intro="{{item.paiintro}}"
            bindtap="swichNav" >
            </image>
          </view>
        </block>
    </scroll-view>
  </view>
  <view class="bottom">
    <view class="text">{{paiIntro}}</view>
  </view>
</view>

wxss如下：

page{ 
  background-color: #f5f5f5; 
  height: 100%; 
  min-height: 100%;
  font-family: "宋体";
}
.context{ 
  width: 100%; height: 100%;
}
.head{ 
  width: 100%; 
  height: 40%; 
  background-color: #fff;
  position: relative;
}
.imgshow{ 
  width: 90%; 
  height: 90%; 
  background-color: #fff;
  overflow: hidden;
  position: absolute; 
  left: 50%; 
  transform: translateX(-50%); 
  top: 23rpx;
}
.imgshow .img{ 
  width: 100%; 
  height: 100%; 
  display: inline-block;
  border-radius: 20px;
}
.head .name{
  width: 50%;
  height: 5%;
  position: absolute;
  z-index: 100;
  left: 25%;
  bottom: 15%;
  color: #fff;
  text-align: center;
}
.imglist{ 
  width: 100%; 
  height: 140rpx; 
  background-color:#fff; 
  box-shadow:0,0,0 rgba(170,170,170, .38); 
  padding: 15rpx 0 0 70rpx; 
  box-sizing: border-box; 
  position: fixed; 
  bottom: 50%; 
  left: 0;
}
.lists{ 
  width: 100%; 
  height: 104rpx; 
  overflow: hidden; 
  background: #fff;  
  white-space: nowrap;
}
.items{ 
  height: 97rpx; 
  border-radius: 6rpx;  
  border:1.5px solid transparent;   
  display: inline-block; 
  overflow: hidden; 
  margin-right: 5rpx;
}
.items.cur{
  border-color: #69c3aa;
}
.items .img{ 
  width: 144rpx; 
  height: 100rpx;
}
.bottom{
  position: fixed;
  top: 51%;
  background: #fff;
  width: 100%;
  height: 49%;
}
.bottom .text{
  width: 90%;
  margin: 20px auto 0;
  font-size: 13.5px;
  font-weight: normal;
}