收藏
回答

scroll-into-view

问题模块
API和组件


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

最后一次编辑于  2017-11-27  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

9 个回答

  • 韬々
    韬々
    2017-11-27

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

    2017-11-27
    赞同
    回复
  • 宋卫隆
    宋卫隆
    2017-11-28

        开发工具: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;

    }


    2017-11-28
    赞同
    回复
  • 宋卫隆
    宋卫隆
    2017-11-29

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

    2017-11-29
    赞同
    回复
  • 宋卫隆
    宋卫隆
    2017-11-29

    有人没

    2017-11-29
    赞同
    回复
  • 韬々
    韬々
    2017-11-29

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


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

    2017-11-29
    赞同
    回复
  • 宋卫隆
    宋卫隆
    2017-11-29

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

    2017-11-29
    赞同
    回复
  • 韬々
    韬々
    2017-11-29

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

    2017-11-29
    赞同
    回复
  • 宋卫隆
    宋卫隆
    2017-11-29

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

    2017-11-29
    赞同
    回复
  • sincere
    sincere
    2018-03-23

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

    2018-03-23
    赞同
    回复