微信小程序开发横向左右图文滚动滑动页面设计与制作

今天给大家带来横向左右图文滚动滑动页面设计与制作教程，制作好以后效果图如下:

一、wxml页面代码如下：

<view class="container">

<view class="section section_gap">
  <view class="section__title">三亚热拍</view>
  <scroll-view class="scroll-view_H" scroll-x="true">
    <view class="scroll-view-item_H" wx:for="{{hotList}}" wx:key="{{item}}" data-pic="{{item.pic}}"
    data-title="{{item.title}}" data-area="{{item.area}}" data-day="{{item.day}}" data-avatar="{{item.avatar}}"
    data-name="{{item.name}}" data-fee="{{item.fee}}"  data-experience="{{item.experience}}" bindtap="yuyue">
      <image src="{{item.pic}}"class="scroll-image"/>
      <view class="content">
      <view  class="title" >{{item.title}}</view>
      <view class="scroll-view-item-AT">
        <view class="area">{{item.area}}</view>
        <view class="day">{{item.day}}</view>
      </view>
      <view class="scroll-view-item-cf">
        <view class="camerist_avatar"><image src="{{item.avatar}}"></image></view>
        <view class="camerist_name">{{item.name}}</view>
        <view class="fee">{{item.fee}}</view>
      </view>
      </view>
    </view>
  </scroll-view>
</view>
<view class="more" bindtap="more">更多<image src="../../image/more.png"></image></view>
</view>

二、wxss样式页面代码如下：

.container{
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
swiper{
  width: 100%;
  height: 500rpx;
}
.slide-image{
   width: 100%;
   height: 100%;
   display: inline-block;
   overflow: hidden;
}
.near{
   width: 100%;
   height: 150px;
}
.section{
  width: 100%;
  height: 580rpx;
}
.section__title{
  padding-top: 12rpx;
  width:100%;
  height:80rpx;
  line-height:80rpx;
  position: relative;
  text-align: center;
  font-size: 50rpx;
  color:#A9A9A9;
  font-weight: bold;
}
.section__title::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12rpx;
  background:#FFEFDB;
}
.scroll-view_H{
  height:500rpx;
  white-space: nowrap;
  display: flex;

}
.scroll-view-item_H{
  width:340rpx;
  height:500rpx;
  margin-right: 24rpx;
  display: inline-block;

}
.scroll-image{
  width:340rpx;
  height:300rpx;
  display: block;
}
.scroll-view-item_H .content{
  width: 338rpx;
  height: 190rpx;
  border: 1rpx solid #FFEFDB;
}
.title{
  margin-top: 20rpx;
  height:40rpx;
  line-height:40rpx;
  font-size: 30rpx;
  text-align: center;
  font-weight: 400;
  color:#A8A8A8;
}
.scroll-view-item-AT{
  margin-top: 20rpx;
  width: 100%;
  height: 40rpx;
  font-size: 11px;
  color:#A8A8A8;

}
.area{
  float: left;
  width: 60rpx;
  height: 30rpx;
  line-height: 30rpx;
}
.day{
  float:left;
  width: 60rpx;
  height: 30rpx;
  line-height: 30rpx;
}
.scroll-view-item-cf{
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 26rpx;
  color:#A8A8A8;
}
.camerist_avatar{
  float: left;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  vertical-align: middle;
}
.camerist_avatar image{
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  vertical-align: middle;
}
.camerist_name{
  float: left;
  margin-left: 20rpx;
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  vertical-align: middle;
  font-size: 28rpx;

}
.fee{
  float: right;
  width: 100rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 28rpx;
}
.more{
 position: relative;
 width: 100%;
 height: 100rpx;
 line-height: 100rpx;
 text-align: center;
 font-size: 14px;
  color:#A8A8A8;
  vertical-align: middle;
}
.more image{
  height: 40rpx;
  width: 40rpx;
  line-height: 40rpx;
  margin-left: 20rpx;
  vertical-align: middle;
}
.more::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12rpx;
  background:#FFEFDB;
}
.near{
  width: 100%;
  height: 350rpx;
  position: relative;
}
.near image{
  width: 100%;
  height: 350rpx;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}
.near text{
  width: 100%;
  height: 350rpx;
  line-height: 350rpx;
  margin-left: 140rpx;
  font-size: 40rpx;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 60;
  color: #7a7a7a;

}

三、js特效代码如下：

Page({
  data: {
    imgUrls: [
      'http://only5201314.com/uploads/2017/04/181412206332.jpg',
      'http://only5201314.com/uploads/2017/04/181412209429.jpg',
      'http://only5201314.com/uploads/2017/04/181412196023.jpg'
    ],
    indicatorDots:true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    hotList:[
      {
        pic:"http://www.lemontreevip.com/upload/201512/201512191450513761.jpg",
        title:"春风十里不如你",
        area:"三亚",
        day:"1day",
        avatar:"http://bao.lanrenmb.com/Public/dist/img/user2-160x160.jpg",
        name:"南若北",
        fee:"3000",
        experience:'7年'
      },
      {
        pic:"http://www.lemontreevip.com/upload/201512/201512191450512739.jpg",
        title:"一场没有终点的旅行",
        area:"三亚",
        day:"1day",
        avatar:"http://bao.lanrenmb.com/Public/dist/img/user2-160x160.jpg",
        name:"苏晓",
        fee:"4000",
        experience:'10年以上'
      },
      {
        pic:"http://www.lemontreevip.com/upload/201603/1458298749772440744000.jpg",
        title:"恋上彩虹的梦",
        area:"三亚",
        day:"1day",
        avatar:"http://bao.lanrenmb.com/Public/dist/img/user2-160x160.jpg",
        name:"峰方",
        fee:"3500",
        experience:'10年'
      },
      {
        pic:"http://www.lemontreevip.com/upload/201512/201512101449733988.jpg",
        title:"日暮三亚",
        area:"三亚",
        day:"1day",
        avatar:"http://bao.lanrenmb.com/Public/dist/img/user2-160x160.jpg",
        name:"大鹏",
        fee:"2500",
        experience:'7年'
      },
      {
        pic:"http://www.lemontreevip.com/upload/201508/1438966134523121267000.jpg",
        title:"帆船高尔夫",
        area:"三亚",
        day:"1day",
        avatar:"http://bao.lanrenmb.com/Public/dist/img/user2-160x160.jpg",
        name:"一方",
        fee:"2500",
        experience:'7年'
      },
      {
        pic:"http://www.lemontreevip.com/upload/201603/201603181458295704.jpg",
        title:"西岛恋曲",
        area:"三亚",
        day:"1day",
        avatar:"http://bao.lanrenmb.com/Public/dist/img/user2-160x160.jpg",
        name:"大浦",
        fee:"1800",
        experience:'5年'
      }
    ],
  },
yuyue: function(e) {
  console.log(e.currentTarget.dataset);
  console.log(e.currentTarget.dataset.pic);
  console.log(e.currentTarget.dataset.name);
  wx.setStorage({
    key:"pic",
    data:e.currentTarget.dataset.pic
  });
  wx.setStorage({
    key:"title",
    data:e.currentTarget.dataset.title
  });
  wx.setStorage({
    key:"area",
    data:e.currentTarget.dataset.area
  });
  wx.setStorage({
    key:"day",
    data:e.currentTarget.dataset.day
  });
  wx.setStorage({
    key:"avatar",
    data:e.currentTarget.dataset.avatar
  });
  wx.setStorage({
    key:"name",
    data:e.currentTarget.dataset.name
  });
  wx.setStorage({
    key:"fee",
    data:e.currentTarget.dataset.fee
  });
  wx.setStorage({
    key:"experience",
    data:e.currentTarget.dataset.experience
  });
    wx.navigateTo({
      url: '../yuyue/yuyue'
    });

},
more: function(){
  wx.navigateTo({
    url:'../more/more'
  })
},
  changeIndicatorDots: function(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function(e) {
    this.setData({
      duration: e.detail.value
    })
  },
  upper: function(e) {
    console.log(e)
  },
  lower: function(e) {
    console.log(e)
  },
  scroll: function(e) {
    console.log(e)
  },
  tap: function(e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

模板简介：该模板名称为【微信小程序开发横向左右图文滚动滑动页面设计与制作】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。