一文读懂微信小程序视图容器组件：scroll-view、swiper、view

非 VIP 用户可前往公众号“前端基地”进行免费阅读，文章链接如下：

一文读懂微信小程序视图容器组件：scroll-view、swiper、view

scroll-view的使用

---

        在微信小程序中，scroll - view 常用于实现可滚动视图区域。

        示例代码，如下：

        app.js

App({  
  // 代码                                  
}) 

        说明：app.js 是小程序的入口文件，负责初始化小程序实例，其中可包含小程序生命周期函数、全局数据与方法等。

        app.json

{  
  "pages": [  
    "pages/scrollView/scrollView"  
  ],  
  "window": {  
    "navigationBarBackgroundColor": "#07c160",  
    "navigationBarTextStyle": "white"  
  }  
} 

        说明：app.json 是小程序配置文件。“pages” 字段配置小程序页面路径，指定项目包含 “pages/scrollView/scrollView” 页面；“window” 字段配置小程序窗口属性，如导航栏背景色为绿色（#07c160），文字颜色为白色 。

        scrollView.js

Page({  
  data:{  
    scrollY:true,  
    scrollX:true  
  }  
})  

        说明：这是页面的逻辑文件。其中包含一个名为data的属性对象，它具有两个属性：scrollY和scrollX。通过将scrollY和scrollX设置为true，可以启用页面的横向和纵向滚动功能。