以下是目前市面上用得比较多的解决方案
小程序电商平台
展示分类、搜索购买、支付、会员、财务、分销、咨询、营销、双语切换等功能。
小程序品牌主页
展示企业形象,服务宣传,企业名片,客户需求表单,发布新闻资讯等
酒店预订
线上预订、定位到店、订单管理等功能。
知识付费
支持音频、视频、图文等多种付费形式,让知识更立体
餐饮外卖
实现展示、点餐、扫码、支付、会员营销等功能
活动票务
支持活动在线发布,活动报名、支付、客户管理等功能
语音口令红包
只要说出发起人设置的口令,程序识别后就可以领取到赏金啦
微信小程序 ,列表头滚动的过程中 ,view 悬浮在顶部 ,如何实现这样的一个效果呢??
//indexjs
//获取应用实例
const app = getApp()
Page({
data: {
testData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
testData2: [1, 2, 3, 4, 5, 10],
//是否显示 悬停布局
isshow:false,
//悬浮布局的数据
toptexxt:""
},
onLoad: function () {
},
/
页面加载完成
/
onReady: function () {
},
/
页面滚动监听
/
onPageScroll: function (e) {
//consolelog(e)
let that = this
let query = wxcreateSelectorQuery()
queryselectAll("section-cell")boundingClientRect(function (res) {
consolelog(res)
let size =reslength;
let position = -1;
let topshow = -1000;//根据需求设置大小
let i=0;
//根据 top 的 大小 获取 当前距离顶部最近的view 的下标, 负数最大值 或者是0,
for(i=0;i<size;i++){0
let top = res[i]top;
if(top<=0 && top>topshow ){
topshow = top;
position=i;
}
}
consolelog("当前坐标是 position = "+position)
let isshow =false;
if (res[0]top<0){
if(position==-1) position=0;
isshow = true;
}
thatsetData({
isshow: isshow,
toptexxt: isshowthatdatatestData[position]:""
})
})exec()
},
})
<!--indexwxml-->
<view>
<view class='header'>这里是header</view>
<view hidden='{{!isshow}}'>
<view class= "section-header section-fixed" >这是section-header {{toptexxt}}</view>
</view>
<view wx:for="{{testData}}" wx:key="{{testData}}">
<view>
<view class='section-cell' id='top{{item}}'>{{item}} </view>
<view wx:for="{{testData2}}" wx:key="{{testData2}}">
<view class='section-cell2' id='child{{item}}'>{{item}}</view>
</view>
</view>
</view>
</view>
/indexwxss/
section-placeholder {
background-color: white;
}
section-fixed {
position: fixed;
top: 0;
}
header {
height: 300rpx;
width: 750rpx;
background-color: bisque;
}
section-header {
height: 80rpx;
width: 750rpx;
background-color: rebeccapurple;
}
section-cell {
width: 750rpx;
height:80rpx;
background-color: gold;
margin-top: 2rpx;
}
section-cell2 {
height: 50rpx;
width: 750rpx;
background-color: darkred;
}
效果
以上就是关于微信小程序能实现哪些功能全部的内容,包括:微信小程序能实现哪些功能、微信小程序 ,列表头滚动的过程中 view 悬浮在顶部、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)