微信小程序 scroll-view滚动到指定位置、 实现swiper slideTo 翻到指定页面，点击元素翻到指定页面效果 楼盘 沙盘效果
实现swiper slideTo 翻到指定页面，点击元素，翻到指定页面效果 楼盘 沙盘效果
scroll-view滚动到指定位置
<scroll-view class="content" scroll-y="{{true}}" scroll-x="{{true}}"
scroll-top="{{contenttop}}" scroll-left="{{contentleft}}">
<image mode="widthFix" class="shapanimg" src="{{shapanimg}}" alt="" />
</scroll-view>
实现的效果是仿照房天下楼盘沙盘做的，可以看下房天下楼盘沙盘地址：https://m.fang.com/xf.d?m=xfLoudongInfo&newcode=1319200085&dongId=294415&city=lf
效果图：
代码：
<view class="shapan">
<view class="stage" style="height:{{stageH}}px">
<scroll-view class="content" scroll-y="{{true}}" scroll-x="{{true}}" scroll-top="{{contenttop}}" scroll-left="{{contentleft}}">
<image mode="widthFix" class="shapanimg" src="{{shapanimg}}" alt="" />
<view class="lppage">
<view
class="swbullet {{currentidx == index ? 'on' : ''}}"
wx:for="{{pointdata}}"
wx:key="{{item.id}}"
style="top:{{ item.y }}px ; left: {{item.x}}px"
data-index="{{index}}"
bindtap="swbullettap"
>
{{ item.name }}
view>
view>
scroll-view>
view>
<swiper class="swiper-container lpsw" current="{{currentidx}}" bindchange="swiperchange">
<swiper-item
class="swiper-slide"
wx:for="{{pointdata}}"
wx:key="{{item.id}}"
>
<view class="lphouse">
<view class="wxh1">{{ item.name }}view>
<view class="lpqi">
<view class="wxp">近期开盘：2019-09-28view>
<view class="wxp">近期交房：2019-09-28view>
view>
view>
<view class="lpinfo">
<view class="wxli">单元: {{ item.elevator_num }}个view>
<view class="wxli">电梯数：{{ item.elevator_num }}view>
<view class="wxli">层数: {{ item.floor_num }}层view>
<view class="wxli">户数：{{ item.households_num }}户view>
view>
swiper-item>
swiper>
view>
js:
// pages/shapan/shapan.js
Page({
/**
* 页面的初始数据
*/
data: {
pointdata: [{
"id": 10,
"l_id": 595695,
"name": "1#",
"elevator_num": 2,
"floor_num": 22,
"households_num": 100,
"left_x": "160",
"top_y": "325",
"floor_type": "高层",
"la_id": "595720,595721,595722",
"unit_num": 5,
"deliver_date": "2018年",
"start_date": "2017-06-17",
"x": "160",
"y": "325"
}, {
"id": 11,
"l_id": 595695,
"name": "2#",
"elevator_num": 6,
"floor_num": 35,
"households_num": 215,
"left_x": "174",
"top_y": "377",
"floor_type": "高层",
"la_id": "595722,595723",
"unit_num": 4,
"deliver_date": "2018年",
"start_date": "2017-06-17",
"x": "174",
"y": "377"
}],
poscenxy: [337, 350],
shapanimg: "http://langfang.6gfang.com/upload/admin/20191104/b28733217ba421c72939f445b3de8a2f.jpg",
currentidx: 0,
winH: '',
winW: '',
lpswH: '',
stageH: '',
contenttop: '',
contentleft: ''
},
swiperchange: function (e) {
this.setData({
currentidx: e.detail.current
})
},
swbullettap: function (e) {
// console.log(e);
let idx = e.currentTarget.dataset.index;
this.setData({
currentidx: idx
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.getSystemInfo({
success: (res, rect) => {
this.setData({
winH: res.windowHeight,
winW: res.windowWidth
})
}
})
const query = wx.createSelectorQuery();
query.select('.lpsw').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec((res) => {
// res[0].top // .lpsw节点的上边界坐标
// res[1].scrollTop // 显示区域的竖直滚动位置
this.setData({
lpswH: res[0].height,
stageH: this.data.winH - res[0].height,
contenttop: (this.data.poscenxy[0] - (this.data.winH - res[0].height) / 2),
contentleft: (this.data.poscenxy[1] - this.data.winW / 2)
})
// console.log('打印demo的元素的信息', res);
// console.log(this.data.contenttop);
// console.log(this.data.contentleft);
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
css(less):
@red: #ff222c;
@blue: #1fa2ff;
.shapan {
position: relative;
width: 100%;
height: 100vh;
.stage {
position: relative;
width: 100%;
/* height: 600px; */
overflow: hidden;
.content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
.shapanimg {
display: block;
width: 900px;
height: 600px;
}
.lppage {
position: absolute;
top: 0;
left: 0;
width: 900px;
height: 600px;
.swbullet {
position: absolute;
display: inline-block;
padding: 0 18rpx;
font-size: 22rpx;
color: #fff;
text-align: center;
line-height: 42rpx;
background: @blue;
border-radius: 6rpx;
}
.on{
background: @red;
}
}
}
}
.lpsw {
position: fixed;
bottom: 0%;
left: 0;
width: 100%;
height: 280rpx;
background: #fff;
.swiper-slide {
overflow: hidden;
.lphouse,
.lpinfo {
position: relative;
padding: 0 30rpx;
}
.lphouse {
padding-top: 20rpx;
.wxh1 {
font-size: 36rpx;
line-height: 60rpx;
color: #333;
}
.lpqi {
display: flex;
flex-direction: row;
font-size: 22rpx;
line-height: 60rpx;
color: #333;
border-bottom: 1px solid #eee;
.wxp {
width: 50%;
}
}
}
.lpinfo {
margin-top: 10rpx;
font-size: 24rpx;
line-height: 60rpx;
color: #333;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.wxli {
width: 50%;
}
}
}
}
}