全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[福州seo公司立荐久澳]微信小程序之点击返回顶层的实现方法

  这篇文章主要为大家详细介绍了微信小程序实现点击返回顶层的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  最近在研究微信小程序,被这个返回顶层给坑了一波,下面贴代码

  wxml代码:

  

<scroll-view scroll-y style="▲◁;height: 1000rpx;" scroll-top="50"▲=▼; enable-back-to-top="-▼□;true"▽▽●▪; scroll-top="{{scrollTop…….scroll_top}}" bindscroll="scrollTopFun">
<block wx:for="{{sortArr}}"◇◆;>
<template is="◆-;spL" data="●◁;{{item}}"><-■;/template>▼▪=;
</block>
</scroll-view> 
<▪●!-- 联系客服 -->
<view class="findOur fliexBox">▲△•;<■…△;contact-button type="=▪△▪;default-light" size="15"○☆…○; session-from="weapp"○•○;></contact-button>客服</view>
<△◆…▼!-- 拨打电话 -->▼□;
<view class="callOur fliexBox" bindtap="call">▽□▷□;电话</view>
<▼▼;view class="fliexBox" style="△•; bottom: 150rpx; border: solid 1px green;" wx:if="{{scrollTop◆•◇□.goTop_show}}" catchtap="▲•;goTopFun"▪◁;>顶层<◇○;/view>

 

  js代码-▲…:

  

var app = getApp();
Page({
data: {
hidden: true,
list: [],
scrollTop: {
scroll_top: 0…•▪,
goTop_show: false
}◁▽☆=,
scrollHeight◁◁○: 0☆▪▲,
floorstatus:true,
sortArr◁■○■:[
{
id▷□▷: 1,
img: "../../images/2●○■△.jpg"▷▪,
title◇…: "□◇…;君御豪园住宅"=◁;○◆☆,
introduction: "杭州不限购不限贷口住宅"-◇▼,
money: 5000,
vperson☆▽☆: 115,
tperson-■●: 0
}
],
},
scrollTopFun-▲◇▼: function (e) {
console★△•◁.log(e.detail);
if (e.detail.scrollTop > 300) {//触发gotop的显示条件 
this.setData({
'scrollTop.goTop_show'=▷★◇: true
})○☆△○;
} else {
this.setData({
'scrollTop◇▪□….goTop_show': false
})★▲=◇;
}
}▪▽,
goTopFun▲☆: function (e) {
var _top = this□▷.data.scrollTop▲▷.scroll_top★◇▽;//发现设置scroll-top值不能和上一次的值一样▽◇◁,六安市小程序制作公司否则无效…★,09
										2020.10
									
									
								
								
									[驻马店seo公司]如何使用phpmyadmin连接本地已存在数据库
									
										配置 phpmyadmin 连接到本机已存在数据库 目录: /xampp/phpMyAdmin 文件: config.inc.php 1、宿州市小程序制作公司查找$cfg[PmaAbsoluteUri] ,哪个数据库好用将其值设置为当前phpmyadmin所在机器,例如:http://172.16.1.200/ph所以这里加了个判断 
if (_top == 0) {
_top = 1;
} else {
_top = 0;
}
this▼□▲☆.setData({
'◁☆◁;scrollTop.scroll_top'=○★;: _top
})★▷○;
},
/**
* 生命周期函数--监听页面加载
*/
onLoad●-▷: function (options) {
var that = this;
wx▼☆○△.getSystemInfo({
success▪□□: function (res) {
that.setData({
scrollHeight…●☆: res.windowHeight
})□◆☆;
}
});
},
})

 

  wxss代码••:

  

.fliexBox{
width: 100rpx;
height: 50rpx;
background-color: #5db13b;
color◆△★: #ffffff;
text-align: center…•◆;
position◆▼▪▼: fixed;
right▷□○●: 0rpx;
bottom: 85rpx△●…;
border-radius◆•-: 20rpx 0rpx 0rpx 20rpx;
font-size: 26rpx;
line-height: 50rpx▽☆;
opacity: .6;
}
.callOur{
bottom: 20rpx•▲;
}
contact-button{
opacity-□□: 0;
position: absolute;
}

 

  主要是需要把scroll-view 组件的高度设置起来而且不能是百分比 如100%这样,可以是rpx,[福州seo公司立荐久澳]这样才可以监测到滑动的距离。

  以上就是微信小程序之点击返回顶层的实现方法的详细内容,更多请关注久澳传媒编程栏目其它相关文章▪★!

[福州seo公司立荐久澳]微信小程序之点击返回顶层的实现方法

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。