zoukankan      html  css  js  c++  java
  • 微信小程序_(视图)简单的scroll-view容器

    scroll-view容器效果  官方文档:传送门

      

    scroll-view  可滚动视图区域
    
    scroll-x    Boolean    false    允许横向滚动
    scroll-y    Boolean    false    允许纵向滚动
    upper-threshold    Number    50    距顶部/左边多远时(单位px),触发 scrolltoupper 事件
    lower-threshold    Number    50    距底部/右边多远时(单位px),触发 scrolltolower 事件
    scroll-top    Number        设置竖向滚动条位置
    scroll-left    Number        设置横向滚动条位置
    scroll-into-view    String        值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
    scroll-with-animation    Boolean    false    在设置滚动条位置时使用动画过渡
    enable-back-to-top    Boolean    false    iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向
    bindscrolltoupper    EventHandle        滚动到顶部/左边,会触发 scrolltoupper 事件
    bindscrolltolower    EventHandle        滚动到底部/右边,会触发 scrolltolower 事件
    bindscroll    EventHandle        滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
    官方文档:scroll-view

     滑动滚动条,下方文本会显示滚动条的状态(到达最上方/滚动中/到达最下方),控制台输出滚动条状态

        

    程序结构

      

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        texts:"滚动条状态"
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function() {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function() {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function() {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function() {
    
      },
    
      upper: function(event) {
        this.setData({ texts: "滚动条到 最上方 了"});
      },
    
      lower: function(event) {
        this.setData({ texts: "滚动条到 最下方 了" });
      },
    
      sroll: function(event) {
        this.setData({ texts: "滚动条 滚动 了" });
        console.log("我在滚动");
        console.log(event);
      }
    })
    test.js
    Gary 微信小程序
    <scroll-view style="height:200px;" scroll-y="true"
         bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="sroll">
        <view id="green" class="scroll-view-item bc_green"></view>
        <view id="red"  class="scroll-view-item bc_red"></view>
        <view id="yellow" class="scroll-view-item bc_yellow"></view>
        <view id="blue" class="scroll-view-item bc_blue"></view>
    </scroll-view>
    <text>{{texts}}</text>
    test.wxml
    /* pages/test/test.wxss */
    .scroll-view{
      white-space: nowrap;
    }
    
    .scroll-view-item{
      height:200px;
    }
    
    .bc_green{
      background-color: green;
    }
    
    .bc_red{
      background-color: red;
    }
    
    .bc_yellow{
      background-color: yellow;
    }
    
    .bc_blue{
      background-color: blue;
    }
    test.wxss
    {
      "pages":[
        "pages/test/test",
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
      }
    }
    app.json

    实现过程

      添加滚动容器属性

    scroll-view     容器
    style="height:200px;"     设置容器高度
    scroll-y="true"                设置容器为纵向
    bindscrolltoupper="upper"     
    滚动到顶部/左边,会触发 scrolltoupper 事件
    bindscrolltolower="lower" 
    滚动到底部/右边,会触发 scrolltolower 事件
    bindscroll="sroll" 
    滚动时触发,会触发sroll事件

      添加视图进入可滚动区域

        <view id="green" class="scroll-view-item bc_green"></view>
        <view id="red"  class="scroll-view-item bc_red"></view>
        <view id="yellow" class="scroll-view-item bc_yellow"></view>
        <view id="blue" class="scroll-view-item bc_blue"></view>

      添加绑定滚动条滚动时的事件

      upper: function(event) {
        this.setData({ texts: "滚动条到 最上方 了"});
      },
    
      lower: function(event) {
        this.setData({ texts: "滚动条到 最下方 了" });
      },
    
      sroll: function(event) {
        this.setData({ texts: "滚动条 滚动 了" });
        console.log("我在滚动");
        console.log(event);
      },

      左右方向滚动条改变为上下方向方向滚动条只需要改变scroll-x/scroll-y属性

    .bc_green{
      background-color: green;
    }
    
    .bc_red{
      background-color: red;
    }
    
    .bc_yellow{
      background-color: yellow;
    }
    
    .bc_blue{
      background-color: blue;
    }

      wxss同css样式,将颜色作为背景添加到View中,将View添加到滚动视图中

    点击"按钮"改变滚动条位置效果

    var order = ['red', 'yellow', 'blue', 'green', 'red']
    Page({
      data: {
        toView: 'red',
        scrollTop: 100
      },
      upper: function (e) {
        console.log(e)
      },
      lower: function (e) {
        console.log(e)
      },
      scroll: function (e) {
        console.log(e)
      },
      tap: function (e) {
        for (var i = 0; i < order.length; ++i) {
          if (order[i] === this.data.toView) {
            this.setData({
              toView: order[i + 1]
            })
            break
          }
        }
      },
      tapMove: function (e) {
        this.setData({
          scrollTop: this.data.scrollTop + 10
        })
      }
    })
    test.js
    Gary 微信小程序
    <scroll-view style="height:200px;" scroll-y="true"
         bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="sroll" 
         scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">>
        <view id="green" class="scroll-view-item bc_green"></view>
        <view id="red"  class="scroll-view-item bc_red"></view>
        <view id="yellow" class="scroll-view-item bc_yellow"></view>
        <view id="blue" class="scroll-view-item bc_blue"></view>
    </scroll-view>
    
     <button size="mini" bindtap="tap">click me to scroll into view </button>
    test.wxml
    /* pages/test/test.wxss */
    .scroll-view{
      white-space: nowrap;
    }
    
    .scroll-view-item{
      height:200px;
    }
    
    .bc_green{
      background-color: green;
    }
    
    .bc_red{
      background-color: red;
    }
    
    .bc_yellow{
      background-color: yellow;
    }
    
    .bc_blue{
      background-color: blue;
    }
    
    test.wxss
    test.wxss
    {
      "pages":[
        "pages/test/test",
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
      }
    }
    app.json

    实现过程

      设置滚动条要滚动到的View视图

     tap: function(e) {
        for (var i = 0; i < order.length; ++i) {
          if (order[i] === this.data.toView) {
            this.setData({
              toView: order[i + 1]
            })
            break
          }
        }
      },

       改变滚动条位置,显示出不同View视图

      tapMove: function (e) {
        this.setData({
          scrollTop: this.data.scrollTop + 10
        })
      }

    官方文档  传送门

    scroll-top    Number        设置竖向滚动条位置
    scroll-left    Number        设置横向滚动条位置
    (如需转载学习,请标明出处)
  • 相关阅读:
    2020年. NET Core面试题
    java Context namespace element 'component-scan' and its parser class ComponentScanBeanDefinitionParser are only available on JDK 1.5 and higher 解决方法
    vue 淡入淡出组件
    java http的get、post、post json参数的方法
    vue 父子组件通讯案例
    Vue 生产环境解决跨域问题
    npm run ERR! code ELIFECYCLE
    Android Studio 生成apk 出现 :error_prone_annotations.jar (com.google.errorprone:error) 错误
    记忆解析者芜青【总集】
    LwIP应用开发笔记之十:LwIP带操作系统基本移植
  • 原文地址:https://www.cnblogs.com/1138720556Gary/p/9433991.html
Copyright © 2011-2022 走看看