小程序模板网

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

微信小程序实战教程：每日看腿（附前端，服务端demo）

发布时间：2018-04-03 14:15 所属栏目：小程序开发教程

 

功能
 
1.列表
 
了解css3的同学,简直就没有难度.
1.结构简单, 需要一个scroll-view作为滚动视图,使用这个是为了它自带的下拉刷新与上拉更多,小程序在这里封装的很简单,直接绑定相应的事件即可实现一个基本的列表功能.
2.scroll-view下使用一个大的view来作为列表,使用css3中的flex实现两列布局.
3.最内层vciew包裹image使用小程序提供的for循环功能渲染并绑定给image绑定相应的点击事件.
 

					
    
						
  1. 
							<!--index.wxml-->
    2. 
						
  2. 
							<view class="container">
    3. 
						
  3. 
							<scroll-view class="container_wrap" scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower">
    4. 
						
  4. 
							<view class="listview">
    5. 
						
  5. 
							<view class="thumbnail" wx:for="{{collections}}">
    6. 
						
  6. 
							<image mode="scaleToFill" src="{{collections[index].thumbnail}}" bindtap="previewImage"></image>
    7. 
						
  7. 
							</view>
    8. 
					

				

					
		

	




            


            


            

            

                

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

                

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

            

          

          

            
            

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

          

          


        

      

      

        

          

                        

              

                

                  
                  
                

              

                        

                      

          

            
            

              
              
            

          

        

      

    

  







  

    

            

        
产品

        
      

            

        
服务

        
      

            

        
帮助

        
      

            

        
关于

        
      

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

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

        联系我们 

    

  









  
  

    
    
    

    

     QQ在线咨询