微信小程序点击按钮跳转到指定页面
首先这是一个仿微信页面的通讯录列表：
当点击页面右侧的字母栏时，页面将跳转到相应字母的位置。
wxml代码如下：
<scroll-view scroll-into-view="{{toview}}" scroll-y>
<view class="box" wx:for="{{communicationList}}" id="{{item.title}}">
<view class="fg">{{item.title}}</view>
<view class="box_1" wx:for="{{item.list}}">
<view class="box1">
<view class="tx">
<image src="{{item.url}}"></image>
</view>
<view class="box2">
<text class="mp">{{item.name}}</text>
</view>
</view>
</view>
</view>
</scroll-view>
<view class="letter">
<view class="letter1" wx:for="{{communicationList}}" bindtap="clickletter" data-index="{{item.title}}">
{{item.title}}
</view>
</view>
wxss代码如下：
.box1{
font-size: 30rpx;
width: 100vw;
height: 100rpx;
/* background-color: blue; */
display: flex;
flex-direction: row;
}
.tx image{
width: 80rpx;
height: 80rpx;
border-radius: 10%;
margin-top: 10rpx;
margin-left: 10rpx;
}
.tx{
/* width: 100rpx;
height: 100rpx; */
/* background-color: brown; */
}
.box2{
margin-left: 20rpx;
height:100rpx;
width:700rpx;
/* background-color: burlywood; */
border-bottom: gainsboro;
border-width: 0 0 1px 0;
border-style: solid;
line-height: 100rpx;
}
.fg{
height: 50rpx;
background-color: gainsboro;
font-size: 25rpx;
padding-top: 10rpx;
padding-left: 15rpx;
}
.letter{
position: fixed;
top:100rpx;
right: 10rpx;
/* background-color: darkorange; */
width: 30rpx;
height: 900rpx;
}
.letter1{
width: 30rpx;
height: 30rpx;
margin-top: 10rpx;
/* background-color: darkorchid; */
}
scroll-view
{
height: 100%;
}
page{
height: 100%;
}
js代码如下：
// pages/address/address.js
Page({
/**
* 页面的初始数据
*/
data: {
communicationList: [{
title: 'A',
list: [{
url: '../img/a1.jpg',
name: 'A-橙子姐姐',
age: 19
}, {
url: '../img/a3.jpg',
name: '阿兰高娃',
age: 19
},
{
url: '../img/a3.jpg',
name: '阿镁',
age: 19
}
]
},
{
title: 'B',
list: [{
url: '../img/b1.jpg',
name: '邦亚宁',
age: 19
}, {
url: '../img/b2.jpg',
name: '保平舅',
age: 19
}]
},
{
title: 'C',
list: [{
url: '../img/c1.jpg',
name: '曹彪彪',
age: 19
}, {
url: '../img/c2.jpg',
name: '柴渊',
age: 19
}]
},
{
title: 'D',
list: [{
url: '../img/d1.jpg',
name: '代悦',
age: 19
}, {
url: '../img/d2.jpg',
name: '大拇指运动',
age: 19
}]
},
{
title: 'E',
list: [{
url: '../img/e1.jpg',
name: '二姨',
age: 19
}]
},
{
title: 'F',
list: [{
url: '../img/f1.jpg',
name: '芳姨',
age: 19
}]
}, {
title: 'R',
list: [{
url: '../img/r1.jpg',
name: 'RoroHna',
age: 19
}]
}
],
toview:""
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
clickletter: function (e) {
// console.log("clickletter----")
var letter = e.currentTarget.dataset.index
// console.log("letter:",letter)
this.setData({
toview: letter
})
}
})
网友评论