用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

github精选:微信小程序入坑指南:scroll-view

纸飞机 2018-3-8 09:37

作者:YangAlas ,来自github 配合阅读文章: scroll-view的高度问题有时候会遇见一个功能需求,就是在整个可视窗口需要有一个滚动区域,而我们给scroll-view设置高度为100%时,然并卵...官方是这样说的测试例子设置 ...

作者:YangAlas ,来自

github


配合阅读文章:

scroll-view的高度问题

有时候会遇见一个功能需求,就是在整个可视窗口需要有一个滚动区域,而我们给scroll-view设置高度为100%时,然并卵...官方是这样说的

测试例子

  • 设置scroll-view高度为100%;
结构用列表渲染
 data: {
    text: [
      1,2,3,4,5,6,7,8,9,10
    ]
  }


 
  
    
      {{item}}
    
  

/*wxss*/
 .scrollView{
  height: 100%;   // 设置scroll-view的高度为100%;
  width: 500rpx;
  background: grey;
}
.item{
  width: 100%;
  height: 150rpx;
  background: #f5f5f5;
  margin-bottom: 20rpx;
}
  • 效果图gif

可以看出设置100%的高度无效

获取视口高度,然后绑定数据到scroll-view上

``` 行内样式 绑定获取到的视口高度 {{item}} ```
onLoad: function () {
    console.log('onLoad')
    var that = this
    wx.getSystemInfo({
      success: function(res) {
        console.log(res)
        console.log(res.windowHeight)
        that.setData({
          wHeight: res.windowHeight
        })
      }
    })
  }
  • 效果图gif

    请注意两张gif的滚动条地方就知道区别所在

scroll-into-view模拟楼层跳转

  • 文档是这么阐述的


    
    
        
        
            
                {{item.title}}
            
        
        
        
            
                {{item.text}}
            
        
    

.head{
	width: 100%;
	height: 100rpx;
	background: #e8e7e6;
}
.container{
	display: -webkit-flex;
	background: #e8e7e6;
  color:#0b0c0c;
  font-family: "微软雅黑";
  font-size: 14px;
}
.left{
	width: 180rpx;
	height: 800rpx;
	background: e8e7e6;
}
.right{
	height: 800rpx;
	background: #f5f5f5;
}
.menu{
	width: 100%;
	height: 60rpx;
	background: #bcd3d9;
	margin-bottom: 10rpx;
}
.item{
	width: 100%;
	height: 400rpx;
	background: #7da9b0;
	margin-bottom: 10rpx;
  line-height: 400rpx;
  text-align: center;
}
 data: {
            classifyViewed: '',
            shopList:[
                {
                    title: '男装'
                },
                {
                    title: '女装'
                },
                {
                    title: '童装'
                },
                {
                    title: '男鞋'
                },
                {
                    title: '睡衣'
                },
                {
                    title: '衬衫'
                },
                {
                    title: '帽子'
                }
            ],
            goodList: [
                {
                    text : '1楼内容男装'
                },
                {
                    text : '2楼内容女装'
                },
                {
                    text : '3楼内容童装'
                },
                {
                    text : '4楼内容男鞋'
                },
                {
                    text : '5楼内容睡衣'
                },
                {
                    text : '6楼内容衬衫'
                },
                {
                    text : '7楼内容帽子'
                }
            ]
        },
    tapClassify: function (e) {
      var id =e.target.dataset.id;
      console.log(id);
      this.setData({
        classifyViewed: id
      });
	console.log(this.data.classifyViewed)
	}
  • 效果图gif

  • wxml结构

有其他scroll-view问题,后更....

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏