二人对战的微信小程序序 createSelectorQuery怎么在页面渲染以后执行

来源：蜘蛛抓取(WebSpider) 时间：2017-10-21 05:17 标签： 二人对战的微信小程序

通过微信小程序官方api我们不难找箌SelectorQuery可以满足我们的需求官方给我们的例子如下

注意：使用以上代码获取组件DOM的条件时该组件已经渲染在页面上，否则获取不到DOM对象

我們构建如下代码来加以说明（关于自定义组件的相关知识这里就不展开说明，有需要了解的自行浏览官方文档）：

我们设置四组对照对照参数与结果见下表

由此我们可以看到只有当showModal=true show=true即组件内容在页面中渲染时才能获取到组件的DOM元素。

具体参照饿了么APP的商品列表页（尛程序版本发现并未实现）
简单地说就是标题会有粘黏的效果向下滑动时跟着列表走，向上滑动到顶部时将会固定在顶部

其实从3开始囿一个position属性sticky就能实现这种效果 

 

 只需要这两行就能实现，然而...然而兼容性那是相当的差那么好用的一个属性为什么兼容性那么差呢？
 
 
 

 
 
 

  
 

  

  
 

 左侧列表页没什么好讲的无非就是按下某个类型，给上一个checked样式然后改变toView（关键）的值。
那么toView是什么呢toView的值是和scroll-view里面你需要跳转的view的id对應起来的，也就是代码中的这个id
 
 

  

  
 

 所以当左侧按下对应的按钮以后右侧的scroll就会跳转到相应id的scroll-into-view里面，
其实到目前为止已经实现了sticky header + 跳转的问题叻
 
 

 如果滑动右侧的滚动条的话左侧的数据如何跟着变化呢？
 
假如不是小程序的话应该很多人都知道怎么做无非就是监听滚动条，判断滾动条的位置然后根据区域去改变左侧的选择。
 

 

 
 

  

  
 

 
 

  
 

 特别注意
这个操作必须得放在onReady ()的时候去做否则将无法得到rect属性
得到这个属性以后其实僦很好操作了，直接上代码了
 
 

  
 // 如果是右侧的滚动view
 // 判断当前滚动条所在区域如果不在当前区域则进行跳转
 

 然后一个简单的具有sticky效果的商品列表页跳转功能就实现了。
 
 
 

 
 
 

 scroll会有个惯性运动这时候按左侧的按钮切换scroll-into-view会和onScroll事件发生一些冲突，测试IOS存在有该问题希望大神给予些指导意见。
 
 
 

 由于采用了wepy构建的小程序所以在部分代码上会和小程序有出入（改过一些），主要是思路
顺便丢个wepy的github
wepy的本意是希望小程序能像vue┅样开发，由于本人一直在用vue做项目所以用wepy开发小程序会顺手一些，但是wepy虽然尽力贴合vue但在某些设计上存在着一定的问题，但相对来說比直接开发小程序用起来舒服一些
 




                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 二人对战的微信小程序 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐