一、回到顶部-页面滚动事件
在微信小程序中，如果你想将“回到顶部”的功能按钮换成图标，你可以通过以下步骤实现：
1. 准备图标
首先，你需要准备一个图标图片。这个图标可以是任何你选择的格式，如 PNG 或 SVG。将图标图片放置在你的小程序项目的合适位置，例如在 /images 文件夹下。
2.在页面的 .js 文件中添加一个用于存储滚动位置的变量。
确保你的 .js 文件中有逻辑来处理点击事件，使得页面滚动到顶部。
// pages/some-page/some-page.js
Page({
data: {
scrollTop: 0, // 存储滚动位置
},
onScroll: function(options) {
this.setData({
scrollTop: options.scrollTop
});
},
scrollToTop: function() {
wx.pageScrollTo({
scrollTop: 0, // 返回顶部
duration: 300 // 动画时长
});
}
});
3. 添加样式（可选）
如果你需要，可以在 .wxss 文件中为图标添加样式，例如改变大小、添加边框或阴影等。
/* pages/some-page/some-page.wxss */
.scroll-to-top-image {
width: 90rpx;
height: 90rpx;
position: fixed; /* 固定定位 */
bottom: 20rpx; /* 距离底部20rpx */
right: 20rpx; /* 距离右侧20rpx */
/* 其他样式 */
}
4. WXML 文件
在你的 .wxml 文件中，使用 image 组件，并设置点击事件来触发回到顶部的功能。
<image src="/images/scroll-to-top.png" class="scroll-to-top-image" bindtap="scrollToTop"></image>
5. 测试功能
在微信开发者工具中测试你的页面，确保点击图标时页面能够平滑地滚动到顶部。
二、回到顶部-升级版 全代码
1.在项目根目录里里面新建component文件夹，再在里面新建ToTop文件夹
2.在ToTop文件夹里面新建component，命名ToTop。
3.ToTop.wxml
<!-- component/ToTop/ToTop.wxml -->
<view class="to-top">
<image class="to-img" src="/image/scroll-to-top.png" bind:tap="toTop" />
</view>1.4ToTop.wxss
/* component/ToTop/ToTop.wxss */
.to-top {
/* 设置组件的宽度和高度为70rpx，rpx是微信小程序中的尺寸单位，可以根据屏幕宽度自动缩放 */
width: 70rpx;
height: 70rpx;
/* 设置背景颜色为半透明的灰色 */
background-color: rgba(128, 128, 128, 0.3);
/* 设置边框圆角为50%，使得组件的边缘呈现圆形 */
border-radius: 50%;
/* 使用flex布局，使得子元素可以在父元素中灵活排列 */
display: flex;
/* 将内容在主轴（默认是垂直方向）上居中对齐 */
justify-content: center;
/* 将内容在侧轴（默认是水平方向）上居中对齐 */
align-items: center;
/* 固定定位，相对于浏览器窗口进行定位 */
position: fixed;
/* 距离右侧边缘30rpx */
right: 30rpx;
/* 距离顶部80%，这里80%是相对于视口高度的百分比 */
top: 80%;
/* 层级 */
z-index: 999;
}
.to-img {
/* 设置图片的宽度和高度为65rpx */
width: 65rpx;
height: 65rpx;
}1.5ToTop.js
// component/ToTop/ToTop.js
Component({
// 组件的方法列表
methods: {
// 回到顶部
toTop() {
wx.pageScrollTo({
scrollTop: 0,
duration: 300
})
}
}
})1.6.在需要的页面json文件中引入 home.json
{
"usingComponents": {
"ToTop": "../../component/ToTop/ToTop"
}
}1.7.使用home.wxml
<!--pages/home/home.wxml-->
<!-- div ==> view img ==> image -->
<view class="home">
<!-- 搜索框开始 -->
<van-search shape="round" background="#fff" placeholder="{{defaultSearchHint}}" bind:click-input="onClickInput">
</van-search>
<!-- 搜索框结束 -->
<!-- 轮播图开始 -->
<swiper indicator-dots indicator-active-color="#ff4796" autoplay interval="3000" circular>
<!-- wx:for="{{数据}}" wx:key 默认 index下标 item每一项 -->
<swiper-item wx:for="{{bannerList}}" wx:key="index">
<image src="{{item.pic}}" referrerPolicy="no-referrer" class="b-img" />
</swiper-item>
</swiper>
<!-- 轮播图结束 -->
<!-- 列表开始 -->
<view class="tab">
<!-- 每一列 -->
<view class="tab-list" wx:for="{{tabList}}" wx:key="index" wx:if="{{item.list.length}}">
<!-- 标题 -->
<view class="name">{{item.name}}</view>
<van-row gutter="10">
<van-col span="8" wx:for="{{item.list}}" wx:key="index2" wx:for-item="item2" wx:for-index="index2">
<image src="{{item2.pic}}" referrerPolicy="no-referrer" class="t-img" />
<view class="title one-txt">{{item2.title}}</view>
<view class="tag one-txt">{{item2.tag}}</view>
</van-col>
</van-row>
</view>
</view>
<!-- 列表结束 -->
<!-- 回到顶部开始 -->
<ToTop></ToTop>
<!-- 回到顶部结束 -->
</view>
