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