小程序模板网

首页 小程序模板网 开发文档 小程序开发教程正文

slider滑动选择器组件学习笔记

发布时间：2018-04-16 11:04 所属栏目：小程序开发教程

slider滑动选择器组件说明:

滑动选择器。

slider滑动选择器示例代码运行效果如下：

下面是WXML代码：

 

				
    
					
  1. 
						<view class="section section_gap">
    2. 
					
  2. 
						<text class="section__title">设置left/right icon</text>
    3. 
					
  3. 
						<view class="body-view">
    4. 
					
  4. 
						<slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle"/>
    5. 
					
  5. 
						</view>
    6. 
					
  6. 
						</view>
    7. 
					
  7. 
						<view class="section section_gap">
    8. 
					
  8. 
						<text class="section__title">设置step</text>
    9. 
					
  9. 
						<view class="body-view">
    10. 
					
  10. 
						<slider bindchange="slider2change" step="5"/>
    11. 
					
  11. 
						</view>
    12. 
					
  12. 
						</view>
    13. 
					
  13. 
						<view class="section section_gap">
    14. 
					
  14. 
						<text class="section__title">显示当前value</text>
    15. 
					
  15. 
						<view class="body-view">
    16. 
					
  16. 
						<slider bindchange="slider3change" show-value/>
    17. 
					
  17. 
						</view>
    18. 
					
  18. 
						</view>
    19. 
					
  19. 
						<view class="section section_gap">
    20. 
					
  20. 
						<text class="section__title">设置最小/最大值</text>
    21. 
					
  21. 
						<view class="body-view">
    22. 
					
  22. 
						<slider bindchange="slider4change" min="50" max="200" show-value/>
    23. 
					
  23. 
						</view>
    24. 
					
  24. 
						</view>
    25. 
				

				

					下面是JS代码：

				

					 

				

				
    
					
  1. 
						var pageData = {}
    2. 
					
  2. 
						for (var i = 1; i < 5; i++) {
    3. 
					
  3. 
						(function (index) {
    4. 
					
  4. 
						pageData['slider' + index + 'change'] = function(e) {
    5. 
					
  5. 
						console.log('slider' + 'index' + '发生 change 事件，携带值为', e.detail.value)
    6. 
					
  6. 
						}
    7. 
					
  7. 
						})(i)
    8. 
					
  8. 
						}
    9. 
					
  9. 
						Page(pageData)
    10. 
				

				

					下面是WXSS代码：

				

					 

				

				
    
					
  1. 
						.page {
    2. 
				

					
		

	




            


            


            

            

                

                    易优小程序（企业版）+灵活api+前后代码开源
                    码云仓库:starfork
                

                

                    本文地址：https://www.eyoucms.com/wxmini/doc/course/23472.html 复制链接 
                    如需定制请联系易优客服咨询：800182392 点击咨询 
                

            

          

          

            
            

            
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

          

          


        

      

      

        

          

                        

              

                

                  
                  
                

              

                        

                      

          

            
            

              
              
            

          

        

      

    

  







  

    

            

        
产品

        
      

            

        
服务

        
      

            

        
帮助

        
      

            

        
关于

        
      

            
   
        
工作日 8:30-12:00 14:30-18:00 

          周六及部分节假日提供值班服务

        联系我们 

    

  









  
  

    
    
    

    

     QQ在线咨询