APP中实现相关功能很容易，h5也可以动态 *** 作DOM来设置
微信小程序没有DOM，该怎么实现呢？
其实这个场景还是比较简单的，碰猜唤正常情况下导航标签是在列表中间的，滑到顶部时吸顶，再拉下来时又回到原来的位置
根据场景，有两个参考思路：
1、顶部定位一个常在的同样的导航标签，通过页面的 scrollOffset 来控制显隐即可
2、通过动态添加 fixed 样式，来动态改变标签在页面中的位置
ps：不过第二种思路会有一个缺陷就是切换位置时页面会因为少兆行了一部分而上移，所以还是需要补白，所以还是用第一种思路
我这里是用了自定义导航栏的，所以实现上会有所不同，如果是用系统导航栏可以稍微调整一下，因为偏移量会有所区别
CSS部分
JS部分
其中 CacheUtil.naviStatuHeight 这个是我应用启动时获取的导航+状态栏高度，X和其他机型还是有所区别，如果是系统导航栏的话这些相关逻辑都可以省略
这里为什么用navigator而不用view呢？
因为navigator是原生组件，可以在最上层，因为有可能列表内容有原生组件的话滑动就会有问题，笑凯所以navigator在不设置url的情况下和view的效果差不多，故采用navigator
cover-view：bug: 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示，而且使用的版本限制也很多，所以就不考虑
首先看看官方提供的模态d窗
api如下：
示例：
这样的模态d窗，充其量只能做个alert，提示一下信息。
但是并不能使用它来处理复杂性的d窗业务，因此写了Michael从信运新自定义了一个，采用了仿原生的样式写法
wxml****：
wxss：
js:
相关连接： http://blog.csdn.net/michael_ouyang/article/details/54700871
------------------------------------------------------------
微信开发者工具的快捷键
微信小程序的生命周期实例演示 —— 微信小程序教程系列（2）
微信小程序的动态修改视图层的数据 —— 微信小程序教程系列（3）
微信小程序的新建页面 —— 微信小程序教程系列（4）
微信小程序的如何使用全局属性 —— 微信小程序教程系列（5）
微信小程序的页面跳转 —— 微信小程序教程系列（6）
微信小程序标题橡坦哗栏和导航栏的设置 —— 微信小程序教程系列（7）
微信小程序的作用域和模块化 —— 微信小程序教程系列（8）
微信小程序视图层的数据绑定 —— 微信小程序教程系列（9）
微信小程序视图层的条件渲染 —— 微信小程序教程系列（10）
微信小程序视图层的列表渲染 —— 微信小程序教程系列（11）
微信小程序视图层的模板 —— 微信小程序教程系列（12）梁行
微信小程序之wxss —— 微信小程序教程系列（13）
微信小程序的网络请求 —— 微信小程序教程系列（14）
微信小程序的百度地图获取地理位置 —— 微信小程序教程系列（15）
微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
微信小程序获取系统日期和时间 —— 微信小程序教程系列（17）
微信小程序之上拉加载和下拉刷新 —— 微信小程序教程系列（18）
微信小程序之组件 —— 微信小程序教程系列（19）
微信小程序之微信登陆 —— 微信小程序教程系列（20）
------------------------------------------------------------
微信小程序之顶部导航栏实例 —— 微信小程序实战系列（1）
微信小程序之上拉加载（分页加载）实例 —— 微信小程序实战系列（2）
微信小程序之轮播图实例 —— 微信小程序实战系列（3）
微信小程序之仿android fragment之可滑动的底部导航栏实例 —— 微信小程序实战系列（4）
微信小程序之登录页实例 —— 微信小程序实战系列（5）
微信小程序之自定义toast实例 —— 微信小程序实战系列（6）
微信小程序之自定义抽屉菜单（从下拉出）实例 —— 微信小程序实战系列（7）
微信小程序之自定义模态d窗（带动画）实例 —— 微信小程序实战系列（8）
------------------------------------------------------------
微信小程序之侧栏分类 —— 微信小程序实战商城系列（1）
微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列（2）
微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）
微信小程序之商品属性分类 —— 微信小程序实战商城系列（4）
微信小程序之购物车 —— 微信小程序实战商城系列（5）
未完待续。。。
更多小程序的教程： http://blog.csdn.net/column/details/14653.html
谢谢观看，不足之处，敬请指导
先前看到网上不少大神写的demo，其菜单栏主要以 A,B,C,D等字母为主，即A,B,C,D等字母为对应该项携带的 id（id不能为汉字或纯数字）。而笔者现在写的项目菜单栏为汉字，所以需要改变数据格式，进而需要改变 wxml 中的循环嵌套和获取。以下为成型后效果，希望对读者有帮助。
实现该功能的思路：通过点击左侧滑栏的某一项，获取到毕磨该元素携带的 id ，然后动态传给右侧滑栏的乎数携 scroll-into-view ，从而实现右侧滑栏对应的该元素运动置顶。
以下为完整数据
数据格式：
/* pages/listers/listers.wxss /
/ pages/list-1/list-1.wxss */
/ 总岁伏体主盒子 /
.container {
position: relative
width: 100%
height: 1220rpx
background-color: #f0f4f7
color: #939393
}
/ 左侧栏主盒子 /
.nav_left{
/ 设置行内块级元素（没使用定位） /
display: inline-block
width: 100%
height: 100%
/ 主盒子设置背景色为灰色 /
background: #fff
text-align: center
/* position: fixed /
left: 0
top: 0
border-top: 1rpx solid #dedede
}
/ 左侧栏list的item /
.nav_left .nav_left_items{
background: #fff
/ 每个高30px /
height: 80rpx
/ 垂直居中 /
line-height: 80rpx
/ 再设上下padding增加高度，总高42px /
padding: 15rpx 0
/ 只设下边线 /
border-bottom: 1px solid #dedede
/ 文字14px /
font-size: 29rpx
color: #101010
font-weight:
}
/ 左侧栏list的item被选中时 /
.nav_left .nav_left_items.active{
/ 背景色变成白色*/
background: #f0f4f7
color: #ed1000
}
/ 右侧栏主盒子 /
.scroll_right{
/ 右侧盒子使用了绝对定位 /
position: fixed
top: 0
right: 0
overflow: auto
flex: 1
/ 宽度75%，高度占满，并使用百分比布局 /
width: 75%
height: 100%
padding: 20rpx
box-sizing: border-box
background-color: #f0f4f7
border-top: 1rpx solid #dedede
}
.mink::after{
display:blockcontent:''clear:both
}
.jiul,.jiul image{
width: 100%
height: 170rpx
}
.minl{
font-size: 29rpx
color: #777
text-align: left
line-height: 60rpx
float: left
background: #f0f4f7
width: 100%
/* height: 50rpx /
}
.mink{
width: 100%
background: #fff
height: 100%
}
/ 右侧栏list的item /
.nav_right_items{
/ 浮动向左 /
float: left
/ 每个item设置宽度是33.33% /
width: 50%
/ height: 160rpx /
text-align: center
color: #4a4a4a
background: #fff
}
.nav_right_items image{
/ 被图片设置宽高 /
width: 60px
height: 50px
margin-top: 15rpx
}
.nav_right_items text{
/ 给text设成块级元素 /
display: block
margin-top: 5rpx
margin-bottom: 10rpx
font-size: 26rpx
/ 设置文字溢出部分为... /
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
}
/ * 自定义其他点击态样式类 **/
.other-navigator-hover{
background:#fff
}
.scroll_left{
width:25%
height:100%
background:#fff
text-align:center
position: fixed
left: 0top: 0
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）