开发工具：v.1.01.1711160,在小米note上试也不行
//获取应用实例
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;
}
强力驱动