特殊标题的制作，利用两个view层次关系实现用横线点缀标题
线条简便的居中方法：
left:0;top:0;bottom:0;right:0;margin:auto;
wxss渲染代码
/*pages/home/home.wxss*/
.title{
height:100rpx;
position:relative;
background:#fff;
}
.title.line{
width:40%;
height:4rpx;
background:#999;
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
.title_name{
width:30%;
text-align:center;
line-height:100rpx;
z-index:1;
scroll-view横向图片滚动
常用的参数设置：
scroll-x：允许横向滚动，类型布尔值，默认false
scroll-y：允许竖向滚动，类型布尔值，默认false
bindscroll，滚动时触发，event.detail={scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}，默认否
利用wx：for循环填充相应的内容
Js文件中的数组数据：
cardArr:[
],
Wxss文件的渲染代码：
.scroll-view_H{
height:320rpx;
white-space:nowrap;
.scroll-view-item_H{
display:inline-block;
width:35%;
margin-right:2%;
height:300rpx;
box-shadow:4rpx4rpx5rpx#ccc;
border-radius:15rpx;
overflow:hidden;
.scroll-view-item_Himage{
width:100%;
display:block;
.scroll-view-item_Hview{
line-height:40rpx;
设置阴影和圆角：
overflow:hidden;用于避免去除上层图片超出区域的的范围
备注：安卓手机显示滚动条的bug修复代码：
/*安卓滚动条Bug修复*/
::-webkit-scrollbar{
width:0;
height:0;
color:transparent;
利用scroll-view制作常用的菜单界面：
上方轮播图通过轮播图组件引入，下方通过左右两个scroll-view组成，左边区域为不设置为任何滚动的scroll-view组件设置导航栏，右方为竖向滚动的展示区域：
要求点击左方的导航栏，右边的展示区域随之滚动到相应区域，右方的展示区域滚动时左边的导航栏也随之变化。
Wxml总代码如下
Js代码如下
//pages/menu/menu.js
Page({
data:{
rightArr:[],
//banner轮播图数组
swiperArr:[
menuArr:[
{
]
},
//左侧的id
//左侧当前项
leftActiveNum:0,
//获取每个区块的高度（操作dom）
//vue中的mounthed也没有说100%渲染完，onReady一样
onReady(){
//避免this指向性错误
let_this=this
//通过延迟获取保证数据在渲染完成后获取已保证正确性
setTimeout(()=>{
letinitArr=[0];//初始的数组
letinitNum=0;//初始的数值
constquery=wx.createSelectorQuery()
//query.selectAll获取所有，参数为节点
query.selectViewport().scrollOffset()
query.exec(function(res){
//console.log(res[0])
res[0].map(val=>{
initNum+=val.height//实现高度的累加
initArr.push(initNum)//将累加的高度添加到数组中
})
_this.setData({
rightArr:initArr
},500)
leftClickFn(e){
//console.log(this.data.rightArr)
this.setData({
leftActiveNum:e.target.dataset.myid,
rightScrollFn(e){
//console.log(e.detail.scrollTop)
letst=e.detail.scrollTop;
letmyArr=this.data.rightArr;
for(leti=0;i if(st>=myArr[i]&&st leftActiveNum:i }); return; Wxss渲染代码如下 /*pages/menu/menu.wxss*/ swiper{ height:calc(100vw/1080*520); .main{ width:100vw; /*calc(100vh-calc(100vw/1080*520));注意-前后的空格*/ height:calc(100vh-calc(100vw/1080*520)); background:#efefef; .left{ border-right:1rpxsolid#000; width:25%; float:left; box-sizing:border-box; .leftview{ border-bottom:1rpxsolid#000; height:80rpx; line-height:80rpx; background:#ffffff; /*设置右侧选中导航栏为蓝色。设置所有为底色，选中的为蓝色*/ .leftview::before{ width:8rpx; .leftview.active{ background:#c4e3f0; .leftview.active::before{ background:#1b29f3; .right{ float:right; /*默认100%无法右浮*/ width:75%; padding:02%; border-radius:10rpx; .right.title{ .right.content{ padding:10rpx; padding-right:0; display:flex; /*顺序排列*/ justify-content:flex-start; flex-wrap:wrap; .box{ width:32%; margin-right:1%; margin-bottom:10rpx; .boximage{ width:80%; border-radius:5rpx; .boxtext{ text-overflow:ellipsis; font-size:28rpx; 左侧核心在于通过点击事件获取对应的item.id 通过leftview::before{}在导航栏前方设置选中状态的显示，每个均设置，但除了激活状态的当item外其余均设置为底色 leftview::before{ scroll-into-view值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素，配合左方的点击事件完成滚动 scroll-with-animation，在设置滚动条位置时使用动画过渡 右侧滚动到顶端随之更新左端的导航栏关键在于获取个展示区域的高度，通过wx.createSelectorQuery()获取相应的数据。通过onReady（）函数在页面初始渲染时获取相应的数据，需要注意的是onReady（）函数并不能确保页面完全渲染完成后再获取数据，因此需要设置事件延迟函数。 需要注意，提前设置let_this=this避免this指向性错误倒是无法正常通过setData更新数据 通过比较滚动事件获得的scrollTop（滚动高度）比对展示区域高度数据，确定要左侧要变动的id