第一次发帖....在网上找了好多demo, 没有一个适合自己的, 然后看见美团团队的一个大佬介绍实现流程, 感觉里面的逻辑好麻烦的样子, 所以自己花了点时间做了一个demo, 自带假数据, 仍在自己创建的小程序里就能看效果.
这个红线是一个参照,可以调整样式隐藏.
主要是用到了节点 wx.createIntersectionObserver 这个api 参数 observeAll: true 可以监听所有的节点. observe 的参数是多个节点id. 这个点是遍历数组后, 把数组转化为相应的字符串. 具体请看demo. js里面的内容较多是因为有一段假数据. 没有整理.多多见谅,
wxml 文件
<view class='scroll-container'>
<scroll-view id='left-scroll' scroll-y bindscroll='scrollleft' scroll-into-view="{{leftToView}}">
<block wx:for="{{list}}" wx:for-item='sec' wx:key="test">
<view class='{{currentIndex == index ? "left-item-selected" : "left-item"}}' id='{{sec.department_en}}' bindtap='tagtap' data-enname='{{sec.department_en}}' data-index='{{index}}'>{{sec.department}}{{index}}</view>
</block>
</scroll-view>
<scroll-view id='scrollview' scroll-y bindscroll='scroll' scroll-top="{{scrollTop}}" scroll-into-view="{{rightToView}}">
<view class='secheader'>{{headerTitle}}</view>
<view class='relative-view'></view>
<block wx:for="{{list}}" wx:for-item='sec' wx:key="{{index}}">
<view id='{{sec.department_en}}' data-index='{{index}}' data-enname='{{sec.department_en}}'>
<view class='title'>{{sec.department}}</view>
<block wx:for="{{sec.doctors}}" wx:for-item='doc' wx:key="{{index}}">
<view class='cell'>
<text>{{doc.department_name}}</text>
<text>{{doc.ctime}}</text>
<text>{{doc.department_id}}</text>
</view>
</block>
</view>
</block>
</scroll-view>
</view>
css 文件
page {
height: 100%;
width: 100%
}
.scroll-container {
display: flex;
flex-flow: row nowrap;
width: 100%;
height: 100%;
}
#left-scroll {
background-color: #f8f8f9;
flex: 0.2
}
.cell {
display: flex;
flex-flow: column;
height: auto;
width: 100%;
box-sizing: border-box;
padding: 20rpx;
margin-bottom: 10rpx;
background-color: #fff233
}
.secheader {
background-color: red;
width: 100%;
height: 60rpx;
position: fixed;
top: 0;
}
.relative-view {
position: fixed;
top: 50%;
width: 100%;
height: 1px;
background-color: red;
}
#scrollview {
height: 100%;
flex: 0.8;
}
.left-item {
width: 100%;
height: auto;
line-height: 100rpx;
background-color: #fff;
border-bottom: 1rpx solid red;
text-align: center;
margin-bottom: 32rpx;
}
.left-item-selected {
width: 100%;
height: auto;
line-height: 100rpx;
background-color: #fff233;
border-bottom: 1rpx solid red;
text-align: center;
margin-bottom: 32rpx;
}
.title {
background-color: green;
}
js 文件
Page({
data: {
list: [
{
"doctors": [{
"ctime": "2018-08-27 19:05:22",
"department_id": 51,
"department_name": "产科",
"expertise": "产科常见病、疑难病的诊治、遗传咨询",
"id": 411,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "李小英",
"photo": null,
"sitting_time": "上午#无,下午#无,无#无,无#无,无#无,无#无,无#无",
"title": "主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 51,
"department_name": "产科",
"expertise": "产科常见病、疑难病的诊治、遗传咨询",
"id": 412,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "黄莺",
"photo": null,
"sitting_time": "下午#无,无#无,无#无,上午#无,无#无,无#无,无#无",
"title": "主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 51,
"department_name": "产科",
"expertise": "产科常见病的诊治",
"id": 413,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "迪丽胡玛尔",
"photo": null,
"sitting_time": "上午#无,上午#无,无#无,无#无,无#无,无#无,无#无",
"title": "主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 51,
"department_name": "产科",
"expertise": "产科常见病、疑难病的诊治",
"id": 414,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "娣丽努尔",
"photo": null,
"sitting_time": "无#无,无#无,上午#无,无#无,上午#无,无#无,无#无",
"title": "主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 51,
"department_name": "产科",
"expertise": "产科常见病、疑难病的诊治",
"id": 415,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "努尔孜娅",
"photo": null,
"sitting_time": "全天#无,无#无,无#无,无#无,无#无,无#无,无#无",
"title": "主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 51,
"department_name": "产科",
"expertise": "产科常见病、疑难病的诊治、遗传咨询",
"id": 416,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "阿米娜",
"photo": null,
"sitting_time": "下午#无,无#无,无#无,下午#无,无#无,无#无,无#无",
"title": "主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 51,
"department_name": "产科",
"expertise": "产科常见病的诊治",
"id": 417,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "孙美凤",
"photo": null,
"sitting_time": "无#无,无#无,下午#无,无#无,下午#无,无#无,无#无",
"title": "主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 51,
"department_name": "产科",
"expertise": "产科常见病的诊治",
"id": 418,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "米热阿依",
"photo": null,
"sitting_time": "无#无,无#无,无#无,上午#无,无#无,无#无,无#无",
"title": "副主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 51,
"department_name": "产科",
"expertise": "产科常见病的诊治",
"id": 419,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "焦永慧",
"photo": null,
"sitting_time": "无#无,上午#无,无#无,无#无,无#无,无#无,无#无",
"title": "主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 51,
"department_name": "产科",
"expertise": "产科常见病、疑难病的诊治",
"id": 420,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "徐德清",
"photo": null,
"sitting_time": "下午#无,上午#无,无#无,无#无,无#无,无#无,无#无",
"title": "主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 51,
"department_name": "产科",
"expertise": "产科常见病、疑难病的诊治",
"id": 421,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "陈芳",
"photo": null,
"sitting_time": "无#无,上午#无,无#无,上午#无,无#无,无#无,无#无",
"title": "主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 51,
"department_name": "产科",
"expertise": "产科常见病、疑难病的诊治、遗传咨询",
"id": 422,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "杜彦枚",
"photo": null,
"sitting_time": "无#无,无#无,全天#无,无#无,无#无,无#无,无#无",
"title": "副主任医师"
}
],
"department": "产科",
"department_en": "ck"
},
{
"doctors": [{
"ctime": "2018-08-27 19:05:22",
"department_id": 27,
"department_name": "骨科关节运动医学",
"expertise": "运动医学、关节疾病",
"id": 246,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "王志刚",
"photo": null,
"sitting_time": "无#无,下午#无,无#无,无#无,无#无,无#无,无#无",
"title": "主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 27,
"department_name": "骨科关节运动医学",
"expertise": "运动医学、关节疾病",
"id": 247,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "赵喜滨",
"photo": null,
"sitting_time": "下午#无,无#无,上午#无,无#无,无#无,无#无,无#无",
"title": "主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 27,
"department_name": "骨科关节运动医学",
"expertise": "关节疾病",
"id": 248,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "张浩沙强",
"photo": null,
"sitting_time": "无#无,无#无,下午#无,无#无,下午#无,无#无,无#无",
"title": "副主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 27,
"department_name": "骨科关节运动医学",
"expertise": "关节疾病",
"id": 249,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "宁凯",
"photo": null,
"sitting_time": "无#无,无#无,无#无,下午#无,上午#无,无#无,无#无",
"title": "副主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 27,
"department_name": "骨科关节运动医学",
"expertise": "脊柱、关节疾病",
"id": 250,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "李坤",
"photo": null,
"sitting_time": "上午#无,无#无,无#无,上午#无,无#无,无#无,无#无",
"title": "主任医师"
}
],
"department": "骨科关节运动医学",
"department_en": "gkgjydyx"
},
{
"doctors": [{
"ctime": "2018-08-27 19:05:22",
"department_id": 46,
"department_name": "泌尿诊疗中心三科（普沁）",
"expertise": "泌尿系肿瘤、结石及先天性泌尿疾病",
"id": 371,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "齐飞波",
"photo": null,
"sitting_time": "上午#无,无#无,无#无,无#无,无#无,无#无,无#无",
"title": "主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 46,
"department_name": "泌尿诊疗中心三科（普沁）",
"expertise": "泌尿系常见、多发病、疑难症，泌尿系肿瘤、输尿管肿瘤",
"id": 372,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "马合苏提",
"photo": null,
"sitting_time": "无#无,无#无,上午#无,无#无,无#无,无#无,无#无",
"title": "副主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 46,
"department_name": "泌尿诊疗中心三科（普沁）",
"expertise": "泌尿系肿瘤、肾脏移植",
"id": 373,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "王岩岗",
"photo": null,
"sitting_time": "无#无,上午#无,无#无,无#无,无#无,无#无,无#无",
"title": "副主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 46,
"department_name": "泌尿诊疗中心三科（普沁）",
"expertise": "泌尿系常见、多发病，尿失禁，尿动力疾病",
"id": 374,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "张建军",
"photo": null,
"sitting_time": "无#无,无#无,无#无,上午#无,无#无,无#无,无#无",
"title": "副主任医师"
},
{
"ctime": "2018-08-27 19:05:22",
"department_id": 46,
"department_name": "泌尿诊疗中心三科（普沁）",
"expertise": "泌尿系常见疾病、泌尿系肿瘤",
"id": 375,
"intro": null,
"mtime": "2018-08-27 19:05:22",
"name": "阿布都热合曼",
"photo": null,
"sitting_time": "无#无,无#无,无#无,下午#无,无#无,无#无,无#无",
"title": "副主任医师"
}
],
"department": "泌尿诊疗中心三科（普沁）",
"department_en": "mnzlzxskpq"
}
],
//是否悬停
fixed: true,
toView: "",
currentIndex: 0,
headerTitle:''
},
onLoad: function(options) {
var that = this
var ennames = []
that.data.list.forEach(function(item) {
var name = "#" + item.department_en
ennames.push(name)
})
var ennames = ennames.join(",")
console.log(ennames)
wx.createIntersectionObserver(this, {
observeAll: true
}).relativeTo(".relative-view")
.observe(ennames, function (res) {
if (res.intersectionRatio > 0) {
console.log(res)
that.setData({
leftToView: res.id,
headerTitle: that.data.list[res.dataset.index].department,
currentIndex: res.dataset.index
})
}
})
},
onUnload() {
if (this._observer) this._observer.disconnect()
},
tagtap: function(e) {
console.log(typeof (e.currentTarget.dataset.index))
console.log(typeof (this.data.currentIndex))
this.setData({
rightToView: e.currentTarget.dataset.enname,
currentIndex: e.currentTarget.dataset.index
})
},
scroll: function(e) {
// console.log(e)
if (e.detail.scrollTop > 0) {
this.setData({
fixed: false
})
} else {
this.setData({
fixed: true
})
}
},
})
如果有问题 欢迎留言指教
网友评论