scroll-into-view
发布于 6 年前 作者 yan78 13491 次浏览 来自 问答

为什么我的scroll-into-view的值都改变了,它确没有滑动呢

9 回复

你好,可以通过getSystemInfo获取视口高度并设定scroll-view的height即可。

    开发工具:v.1.01.1711160,在小米note上试也不行

//index.js

//获取应用实例

const app = getApp()

Page({

 data: {

   toView: “all”,

   companyFirstLetterList: [“B”, “D”, “F”, “G”, “H”, “J”, “K”, “L”, “M”, “N”, “P”, “Q”, “R”, “T”, “X”, “Y”, “Z”],

   companyList: [{ “compname”: “北大方正人寿”, “show”: true, “nameFirstLetter”: “B”},

     { “compname”: “百年人寿”, “show”: false,“nameFirstLetter”:“B”},

     { “compname”: “长城人寿”, “show”: true, “nameFirstLetter”: “C” },

     { “compname”: “长生人寿”, “show”: false, “nameFirstLetter”: “C” },

     { “compname”: “东吴人寿”, “show”: true, “nameFirstLetter”: “D”},

     { “compname”: “富德生命”, “show”: true, “nameFirstLetter”: “F”},

     { “compname”: “复星保德信”, “show”: false, “nameFirstLetter”: “F”},

     { “compname”: “光大永明”, “show”: true, “nameFirstLetter”: “G”},

     { “compname”: “国华人寿”, “show”: false, “nameFirstLetter”: “G”},

     { “compname”: “工银安盛”, “show”: false, “nameFirstLetter”: “G”},

     { “compname”: “恒安标准”, “show”: true, “nameFirstLetter”: “H”},

     { “compname”: “恒大人寿”, “show”: false, “nameFirstLetter”: “H”},

     { “compname”: “弘康人寿”, “show”: false, “nameFirstLetter”: “H”},

     { “compname”: “横琴人寿”, “show”: false, “nameFirstLetter”: “H”},

     { “compname”: “华泰人寿”, “show”: false, “nameFirstLetter”: “H”},

     { “compname”: “华夏保险”, “show”: false, “nameFirstLetter”: “H”},

     { “compname”: “和谐健康”, “show”: false, “nameFirstLetter”: “H”},

     { “compname”: “合众人寿”, “show”: false, “nameFirstLetter”: “H”},

     { “compname”: “君康人寿”, “show”: true, “nameFirstLetter”: “J”},

     { “compname”: “建信人寿”, “show”: false, “nameFirstLetter”: “J”},

     { “compname”: “交银康联”, “show”: false, “nameFirstLetter”: “J”},

     { “compname”: “昆仑健康”, “show”: true, “nameFirstLetter”: “K”},

     { “compname”: “利安人寿”, “show”: true, “nameFirstLetter”: “L” },

     { “compname”: “陆家嘴国泰”, “show”: false, “nameFirstLetter”: “L”},

     { “compname”: “民生人寿”, “show”: true, “nameFirstLetter”: “M”},

     { “compname”: “农银人寿”, “show”: true, “nameFirstLetter”: “N”},

     { “compname”: ‘平安人寿’, “show”: true, “nameFirstLetter”: “P”},

     { “compname”: “前海人寿保险”, “show”: true, “nameFirstLetter”: “Q”},

     { “compname”: “人保健康”, “show”: true, “nameFirstLetter”: “R”},

     { “compname”: ‘人保寿险’, “show”: false, “nameFirstLetter”: “R”},

     { “compname”: “瑞泰人寿”, “show”: false, “nameFirstLetter”: “R”},

     { “compname”: ‘天安人寿’, “show”: true, “nameFirstLetter”: “T”},

     { “compname”: ‘同方全球’, “show”: false, “nameFirstLetter”: “T”},

     { “compname”: “泰康人寿”, “show”: false, “nameFirstLetter”: “T” },

     { “compname”: “太平人寿”, “show”: false, “nameFirstLetter”: “T”},

     { “compname”: “太平洋”, “show”: false, “nameFirstLetter”: “T” },

     { “compname”: “太平养老”, “show”: false, “nameFirstLetter”: “T”},

     { “compname”: “信诚人寿”, “show”: true, “nameFirstLetter”: “X”},

     { “compname”: “幸福人寿”, “show”: false, “nameFirstLetter”: “X”},

     { “compname”: “新光海航”, “show”: false, “nameFirstLetter”: “X”},

     { “compname”: “新华人寿”, “show”: false, “nameFirstLetter”: “X”},

     { “compname”: “信泰人寿”, “show”: false, “nameFirstLetter”: “X” },

     { “compname”: “永安财产”, “show”: true, “nameFirstLetter”: “Y”},

     { “compname”: “友邦人寿”, “show”: false, “nameFirstLetter”: “Y” },

     { “compname”: “英大泰和”, “show”: false, “nameFirstLetter”: “Y”},

     { “compname”: “阳光人寿”, “show”: false, “nameFirstLetter”: “Y” },

     { “compname”: “中德安联”, “show”: false, “nameFirstLetter”: “Z” },

     { “compname”: “中国人寿”, “show”: false, “nameFirstLetter”: “Z”},

     { “compname”: “中华联合人寿”, “show”: false, “nameFirstLetter”: “Z”},

     { “compname”: “中荷人寿”, “show”: false, “nameFirstLetter”: “Z” },

     { “compname”: “中宏人寿”, “show”: false, “nameFirstLetter”: “Z”},

     { “compname”: “中美联泰大都会”, “show”: false, “nameFirstLetter”: “Z”},

     { “compname”: “中英人寿”, “show”: false, “nameFirstLetter”: “Z” },

     { “compname”: “中意人寿”, “show”: false, “nameFirstLetter”: “Z”}]

 },

 

 onLoad: function () {

 

 },

 onFirstLetterItemClickListener: function (e) {

   this.setData({

     toView: e.currentTarget.dataset.id,

   })

 }

})

<!–index.wxml–>

<wxs module=“handle”>

 var getCompanyScrollHeight = function(companyList, companyFirstLetter) {

   var height = 0;

   if (companyList != undefined && companyList != null && companyList.length != 0) {

     height = height + companyList.length * 81;

   }

   if (companyFirstLetter != undefined && companyFirstLetter != null && companyFirstLetter.length != 0) {

     height = height + companyFirstLetter.length * 50;

   }

   return height + 81;

 }

 module.exports = {

   getCompanyScrollHeight: getCompanyScrollHeight,

 }

</wxs>

<view class="">

<scroll-view class=“scroll-company” scroll-y=“true” style=“height:{{handle.getCompanyScrollHeight(companyList,companyFirstLetterList)}}rpx” scroll-into-view="{{toView}}">

     <view class=‘company_name’ id=‘all’>推荐产品</view>

     <block wx:for="{{companyList}}" wx:key=“company”>

       <view class=“company_item” id=’{{item.show==true?item.nameFirstLetter:""}}’>

         <view class=‘first_Letter’ wx:if="{{item.show==true}}">{{item.nameFirstLetter}}</view>

         <view class=“item_company_container”>

           <view class=“horizontal_line_marginleft” wx:if="{{item.show!=true}}"></view>

           <view class=‘company_name’ bindtap=‘onCompanyItemClickListener’>{{item.compname}}</view>

         </view>

       </view>

     </block>

   </scroll-view>

    <view class=‘first_letter_container’>

     <block wx:for="{{companyFirstLetterList}}" wx:key=“firstletter”>

       <view class=‘item_first_letter’ hover-class=“item_first_letter_hover” hover-start-time=“0” hover-stay-time=“0” bindtap=‘onFirstLetterItemClickListener’ data-id=’{{item}}’>

         {{item}}

       </view>

     </block>

   </view>

</view>

/**index.wxss**/

page{

 width: 100%;

 height: 100%;

}

.first_Letter {

 width: 100%;

 height: 50rpx;

 line-height: 50rpx;

 background: #f1f1f1;

 box-sizing: border-box;

 padding-left: 30rpx;

 font-size: 30rpx;

 color: #333;

}

.item_company_container {

 width: 100%;

 height: 81rpx;

}

.horizontal_line_marginleft {

 height: 1rpx;

 width: 730rpx;

 margin-left: 20rpx;

 background-color: #f1f1f1;

}

.company_name {

 height: 80rpx;

 line-height: 80rpx;

 box-sizing: border-box;

 padding-left: 30rpx;

 font-size: 30rpx;

 color: #333;

}

/* 字母列表 */

.first_letter_container {

 width: 80rpx;

 position: fixed;

 right: -1rpx;

 top: 190rpx;

 display: flex;

 flex-direction: column;

 align-items: center;

 font-size: 36rpx;

}

.item_first_letter {

 width: 50rpx;

 height: 50rpx;

 line-height: 50rpx;

 text-align: center;

}

.item_first_letter_hover {

 color: #fff;

 background: #6e6edd;

 border-radius: 25rpx;

}

为什么我拿每一条的高度加起来算的会高了,是底层rpx转px的误差造成的吗

scroll-view的高度请设置成小于内部元素的高度,这样scroll-view才能在y轴方向滚动。

eg:<scroll-view class=“scroll-company” scroll-y=“true” style=“height: 500px” scroll-into-view="{{toView}}">

官方技术小哥,给看看问题呗

我想要它满屏显示,高度怎么设置,用100%也不行

您好,问一下,解决了吗? 能否看一下相关代码。

你好,请提供一下出现问题的工具版本,以及能复现问题的简单代码示例。

回到顶部