小程序
小游戏
企业微信
微信支付
扫描小程序码分享
为什么我的scroll-into-view的值都改变了,它确没有滑动呢
9 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
您好,问一下,解决了吗? 能否看一下相关代码。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
为什么我拿每一条的高度加起来算的会高了,是底层rpx转px的误差造成的吗
你好,可以通过getSystemInfo获取视口高度并设定scroll-view的height即可。
我想要它满屏显示,高度怎么设置,用100%也不行
scroll-view的高度请设置成小于内部元素的高度,这样scroll-view才能在y轴方向滚动。
eg:<scroll-view class="scroll-company" scroll-y="true" style="height: 500px" scroll-into-view="{{toView}}">
有人没
官方技术小哥,给看看问题呗
开发工具: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>
</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}}
/**index.wxss**/
page{
width: 100%;
height: 100%;
.first_Letter {
height: 50rpx;
line-height: 50rpx;
background: #f1f1f1;
box-sizing: border-box;
padding-left: 30rpx;
font-size: 30rpx;
color: #333;
.item_company_container {
height: 81rpx;
.horizontal_line_marginleft {
height: 1rpx;
width: 730rpx;
margin-left: 20rpx;
background-color: #f1f1f1;
.company_name {
height: 80rpx;
line-height: 80rpx;
/* 字母列表 */
.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;
text-align: center;
.item_first_letter_hover {
color: #fff;
background: #6e6edd;
border-radius: 25rpx;
你好,请提供一下出现问题的工具版本,以及能复现问题的简单代码示例。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
您好,问一下,解决了吗? 能否看一下相关代码。
为什么我拿每一条的高度加起来算的会高了,是底层rpx转px的误差造成的吗
你好,可以通过getSystemInfo获取视口高度并设定scroll-view的height即可。
我想要它满屏显示,高度怎么设置,用100%也不行
scroll-view的高度请设置成小于内部元素的高度,这样scroll-view才能在y轴方向滚动。
eg:<scroll-view class="scroll-company" scroll-y="true" style="height: 500px" scroll-into-view="{{toView}}">
有人没
官方技术小哥,给看看问题呗
开发工具: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;
}
你好,请提供一下出现问题的工具版本,以及能复现问题的简单代码示例。