SUI Mobile 使用经验

最近工作中需要做一个微信公众号菜单的功能，所以就用到手机端样式，我们用的就是 SUI 库。因为之前没有接触过手机端的UI库，加上API文档上的不全面，属实折腾了很久，所以记录下踩过的坑。

一、基本布局结构

    
    
    
    
    
    
    
    
    


    
    

        
        

            
            

                
                
标题
            

            
            

                
                    
                    首页
                
                
                    
                    收藏
                
                
                    
                    设置
                
            

            
            

                
这里是content
            
        

        
        
...
    

    
    

    
    

        

            
这是一个侧栏
            

            
            
关闭
        
    

    
    
    
    
    
     

二、组件

1. picker

picker是一个JS实现的类似select的组件，他可以代替原生的select组件，并且功能更加强大、样式更加统一。

picker 需要初始化才能使用，你可以在一个 input 元素上初始化picker，当用户点击input的时候会弹出picker的弹层

 

var val = "", displayVal = "";

$("#picker").picker({
                toolbarTemplate: '
\
  关闭\
  确定\
  
标题
\
  
',
                cols: [
                  {
                      textAlign: 'center',
                      values: ["1", "2", "3", "4"],//隐藏值
                      displayValues: ["苹果", "橘子", "香蕉", "葡萄"]//显示值
                  }
                ],
                formatValue: function (p, values, displayValues) {//自定义方法，用来控制如何显示picker的选中值
                    return displayValues[0];
                },
                onClose: function (picker, values, displayValues) {//picker 关闭时的触发动作
                    //这里获取关闭时选择的值
                    val = picker.value[0];
                    displayVal = picker.displayValue[0];
                },
            });

得到值：可以在 onClose 关闭方法中获取

clear清除

个人发现 picker 组件只能初始化一次，当想要动态为 picker 赋值时好像没用，所以暂时用的方法是在 picker 组件外写一个div，通过div实现清除。最好再调用 picker 的初始化方法。

$(".picker-div").html('');
$(".picker-div").html('');

2. 无限滚动

这里踩过的坑就是： $.init(); 方法一定要调用， 页面布局一定要有 page 集合的容器，也就是页面的基本布局。

        

            

            

                
底部无限滚动