Skip to content

7
7-Eleven
Commit cf95c099 by 高淑倩
Options

add: 我的_整个页面滚动

parent d3e96175
Showing with 753 additions and 7 deletions
src/pages/my/my.js
......@@ -22,12 +22,25 @@ wxService.page({
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
onReady () {
this.animation = wx.createAnimation({
duration: 1000,
timingFunction: 'linear'
})
},
translate () {
// 平移变换
// this.animation.translateY(- 80).step()
this.animation.translateY(- 180).step()
this.setData({animation: this.animation.export()})
},
reset () {
this.animation.translateY(0)
.step({duration: 0})
this.setData({animation: this.animation.export()})
},
//点击展开
onTapUnfold(){
......
src/pages/my/my.json
{
"navigationBarTitleText": "我的",
"disableScroll": true,
"usingComponents": {
"bottom-tabs": "./../../component/bottomTabs/bottomTabs"
}
......
src/pages/my/my.wxml
......@@ -193,4 +193,16 @@
</view>
</view>
<bottom-tabs />
\ No newline at end of file
<bottom-tabs />
<!--<view class="animation-element-wrapper">
<view class="animation-element" animation="{{animation}}"></view>
</view>
<view class="animation-buttons" scroll-y="true">
<button class="animation-button" bindtap="translate">移动</button>
<button class="animation-button animation-button-reset" bindtap="reset">还原</button>
</view>-->
src/pages/my/my.wxss
......@@ -269,4 +269,48 @@ page{
display: inline-block;
margin-left: 23rpx;
vertical-align: middle;
}
\ No newline at end of file
}
.animation-element-wrapper {
display: flex;
width: 100%;
padding-top: 150rpx;
padding-bottom: 150rpx;
justify-content: center;
overflow: hidden;
background-color: #ffffff;
z-index: 8888;
}
.animation-element {
width: 200rpx;
height: 200rpx;
z-index: 8888;
background-color: #1AAD19;
}
.animation-buttons {
padding: 30rpx 50rpx 10rpx;
width: 100%;
height: 700rpx;
box-sizing: border-box;
}
.animation-button {
float: left;
line-height: 2;
width: 300rpx;
margin: 15rpx 12rpx;
}
.animation-button-reset {
width: 620rpx;
}
src/pages/my_1/my.js 0 → 100644
// pages/my/my.js
const app = getApp()
const wxService = require('../../utils/wxService')
const utils = require('../../utils/util')
const envInfo = require('../../config/index').envInfo
wxService.page({
/**
* 页面的初始数据
*/
data: {
unfold:false,
startY:'',
refreshClass:'',
delBtnWidth:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady () {
this.animation = wx.createAnimation({
duration: 2000,
timingFunction: 'linear'
})
},
translate () {
console.log('平移变换')
// 平移变换
this.animation.translateY(- 107).step()
this.setData({animation: this.animation.export()})
},
reset () {
console.log('重置')
this.animation.translateY(0)
.step({duration: 0})
this.setData({animation: this.animation.export()})
},
//点击展开
onTapUnfold(){
this.setData({
unfold: !this.data.unfold
})
},
onHide: function () {
this.reset()
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 3
})
}
const query = wx.createSelectorQuery()
query.select('#plusImg').boundingClientRect()
query.selectViewport().scrollOffset()
var that = this;
query.exec(function (res) {
that.setData({
delBtnWidth: res[0].height
},()=>{
that.translate()
})
})
},
// 开始滑动事件
touchS: function (e) {
console.log('开始滑动事件', e)
if (e.touches.length == 1) {
this.setData({
//设置触摸起始点水平方向位置
startY: e.touches[0].clientY
});
}
},
touchM: function (e) {
console.log('333', e)
if (e.touches.length == 1) {
//手指移动时y方向位置
var moveY = e.touches[0].clientY;
//手指起始点位置与移动期间的差值
var disY = moveY - this.data.startY;
var delBtnWidth = this.data.delBtnWidth;
var moveDistance = delBtnWidth - disY;
var txtStyle = "";
console.log('------', disY)
if (disY == 0 || disY < 0) { //如果移动距离小于等于0，文本层位置不变
txtStyle = "margin-top:-" + delBtnWidth;
} else if (disY > 0) { //移动距离大于0，文本层left值等于手指移动距离
txtStyle = "margin-top:-" + moveDistance + "px";
console.log('+++', txtStyle)
if (disY >= delBtnWidth) {
//控制手指移动距离最大值为删除按钮的宽度
txtStyle = "margin-top:0px" ;
}
}
this.setData({
refreshClass: txtStyle
})
console.log(txtStyle)
}
},
// 滑动结束事件
touchE: function (e) {
if (e.changedTouches.length == 1) {
//手指移动结束后水平位置
var endY = e.changedTouches[0].clientY;
//触摸开始与结束，手指移动的距离
var disY = endY-this.data.startY;
var delBtnWidth = this.data.delBtnWidth;
//如果距离小于删除按钮的1/2，不显示删除按钮
var txtStyle = "";
if (disY > 0){
txtStyle = disY > delBtnWidth ? "margin-top:-" + delBtnWidth : "margin-top:" + disY + "px";
this.setData({
refreshClass: txtStyle
})
}
console.log('////',txtStyle)
} else {
}
},
})
\ No newline at end of file
src/pages/my_1/my.json 0 → 100644
{
"navigationBarTitleText": "我的",
"disableScroll": true,
"usingComponents": {
"bottom-tabs": "./../../component/bottomTabs/bottomTabs"
}
}
\ No newline at end of file
src/pages/my_1/my.wxml 0 → 100644
<!--pages/my/my.wxml-->
<view class="page-user-center">
<view class="top-content">
<view class="user-header-wrap">
<view class="header-content">
<view class="avatar-wrap">
<view class="avatar">
<open-data type="userAvatarUrl" />
</view>
<image class="crown" src="/assets/imgs/crown.png" />
</view>
<view class="user-info">
<text class="member">分享号会员</text>
<text class="name">会员名称</text>
</view>
<view class="method-btn">不会玩看这里
<image class="small-arrow" src="/assets/imgs/small-arrow-right.png" />
</view>
</view>
<view class="opration-wrap">
<view class="opration-list">
<text>2268</text>
<text>积分</text>
</view>
<view class="opration-list">
<text>2268</text>
<text>优惠券</text>
</view>
<view class="opration-list">
<text>2268</text>
<text>分享值</text>
</view>
<view class="opration-list">
<image class="code" src="/assets/imgs/member-code.png" />
<text>会员码</text>
</view>
</view>
</view>
<view class="member-interest">
<!-- 收起 -->
<view class="interest-fold" bindtap="onTapUnfold">
<image src="/assets/imgs/plus-bg.png" />
<view class="interest-top">
<text class="title">PLUS 已为你节省 xxx 元</text>
</view>
<view class="recharge">
<text>一键续费PLUS会员</text>
<image src="/assets/imgs/small-arrow-right.png" />
</view>
</view>
<!-- 普通会员 -->
<view class="interest-fold" bindtap="onTapUnfold" wx:if="{{false}}">
<image src="/assets/imgs/regular-member.png" />
<view class="regular-top">
即刻成为
<text class="regular-title"> PLUS </text>
会员，立享xxx权益
</view>
<view class="recharge">
<!-- <text>一键续费PLUS会员</text> -->
<image src="/assets/imgs/small-arrow-right.png" />
</view>
</view>
<!-- 展开 -->
<view class="interest-unfold" id="plusImg">
<image class="interest-unfold-bg" src="/assets/imgs/interest-unfold.png" />
<view class="interest-title-line">
<image src="/assets/imgs/interest-line.png" />
</view>
<view class="personal-interest">
专属xxx权益
</view>
<view class="interest-name">
<view class="interest-ul">
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png" />
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png" />
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png" />
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png" />
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
<view class="interest-list">
<image class="interest-icon" src="/assets/imgs/interest-icon.png" />
<view class="interest-title">
<text>权益名称</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!--<view class="animation-element-wrapper">
<view class="animation-element" animation="{{animation}}"></view>
</view>-->
<view class="main-content" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="{{refreshClass}}">
<view animation="{{animation}}">
<view class="order-ul">
<view class="order-list">
<view class="my-order">
<text class="order-title">我的订单</text>
<text class="look-all">查看全部订单</text>
</view>
<view class="order-item">
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
</view>
</view>
</view>
<view class="banner">
<image src="/assets/imgs/invitation-bg.png"></image>
<view class="banner-title">
<view class="top-title">拉卡萨解放军</view>
<view class="bottom-title">地方的对方水电费第三方第三方</view>
</view>
</view>
<view class="order-ul">
<view class="order-list">
<view class="my-order">
<text class="order-title">常用工具？</text>
</view>
<view class="order-item">
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
<view class="item">
<image class="order-icon"></image>
<view class="order-desc">待付款</view>
</view>
</view>
<view class="tool-list" wx:if="{{false}}">
<view class="tool-item">
<image class="tool-icon"></image>
<view class="tool-desc">待付款</view>
</view>
<view class="tool-item">
<image class="tool-icon"></image>
<view class="tool-desc">待付款</view>
</view>
<view class="tool-item">
<image class="tool-icon"></image>
<view class="tool-desc">待付款</view>
</view>
<view class="tool-item">
<image class="tool-icon"></image>
<view class="tool-desc">待付款</view>
</view>
</view>
</view>
</view>
</view>
</view>
<button class="animation-button" bindtap="translate">移动</button>
<button class="animation-button animation-button-reset" bindtap="reset">还原</button>
</view>
<bottom-tabs/>
<!--<view class="animation-element-wrapper">
<view class="animation-element" animation="{{animation}}"></view>
</view>
<view class="animation-buttons" scroll-y="true">
<button class="animation-button" bindtap="translate">移动</button>
<button class="animation-button animation-button-reset" bindtap="reset">还原</button>
</view>-->
src/pages/my_1/my.wxss 0 → 100644
/* pages/my/my.wxss */
page{
background-color: #F9F9F9;
padding-bottom: 30rpx;
}
.top-content{
background-color: #ffffff;
}
.user-header-wrap{
padding: 60rpx 30rpx 0;
}
.avatar{
width: 96rpx;
height: 96rpx;
border-radius: 50%;
overflow: hidden;
}
.user-info{
display: inline-block;
margin-left: 30rpx;
}
.member,.name{
display: block;
}
.member{
font-size: 25rpx;
color: #c09a74;
margin-top: 4rpx;
}
.name{
font-size: 32rpx;
color: #666666;
margin-top: 10rpx;
}
.method-btn{
float: right;
font-size: 18rpx;
width: 160rpx;
height: 36rpx;
line-height: 36rpx;
text-align: center;
color: #c09a74;
border: 1px solid #c09a74;
border-radius: 34rpx;
}
.opration-list{
text-align: center;
min-width: 60rpx;
}
.opration-wrap{
display: flex;
justify-content: space-around;
margin-top: 50rpx;
}
.opration-list text{
display: block;
}
.opration-list text:first-child{
font-size: 32rpx;
color: #666666;
}
.opration-list text:last-child{
margin-top: 20rpx;
font-size: 20rpx;
}
.code{
display: block;
width: 36rpx;
height: 36rpx;
margin: 0 auto;
}
.small-arrow{
width: 18rpx;
height: 12rpx;
}
.avatar-wrap{
width: 93rpx;
height: 93rpx;
display: inline-block;
vertical-align: top;
position: relative;
}
.crown{
width: 26rpx;
height: 23rpx;
position: absolute;
top: -10rpx;
right: 0;
}
.member-interest{
margin-top: 30rpx;
}
.interest-fold{
width: 690rpx;
height: 76rpx;
position: relative;
margin: 0 auto -5rpx;
}
.interest-fold image{
width: 690rpx;
height: 76rpx;
}
.interest-top{
position: absolute;
top: 20rpx;
left: 24rpx;
}
.regular-top{
position: absolute;
top: 24rpx;
left: 24rpx;
font-size: 20rpx;
color: #C09A74;
}
.interest-top .title{
color: #89643f;
font-size: 20rpx;
}
.regular-title{
color: #F7B500;
font-weight: bold;
}
.recharge{
position: absolute;
top: 20rpx;
right: 24rpx;
}
.recharge text{
color: rgba(0,0,0,0.5);
font-size: 20rpx;
}
.recharge image{
width: 23rpx;
height: 16rpx;
margin-left: 9rpx;
}
.interest-unfold{
height: 225rpx;
position: relative;
}
.interest-unfold-bg{
width: 750rpx;
height:225rpx;
}
.interest-name{
position: absolute;
top: 60rpx;
left: 30rpx;
}
.interest-title-line{
position: absolute;
top: 15rpx;
left: 230rpx;
}
.interest-title-line image{
width: 286rpx;
height: 5rpx;
}
.personal-interest{
color: #89643f;
font-size: 20rpx;
position: absolute;
top: 27rpx;
left: 320rpx;
}
.interest-title{
color: #FACEA2;
font-size: 20rpx;
}
.interest-icon{
width: 72rpx;
height: 72rpx;
}
.interest-ul{
width: 630rpx;
padding: 0 30rpx;
display: flex;
justify-content: space-around;
}
.interest-list{
text-align: center;
}
.main-content{
position: relative;
/* margin-top: -4rpx; */
padding: 0 20rpx;
background-color: #F9F9F9;
/* margin-top: -228rpx; */
margin-top: -10rpx;
z-index: 99;
}
.order-list{
width: 664rpx;
border-radius: 10rpx;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
padding: 18rpx 20rpx 43rpx 23rpx;
}
.my-order{
padding-bottom: 7rpx;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.order-title{
font-size: 26rpx;
}
.look-all{
position: absolute;
right: 0;
bottom: 7rpx;
font-size: 21rpx;
color: #C09A74;
}
.order-icon{
width: 71rpx;
height: 69rpx;
background-color: #D8D8D8;
}
.order-desc{
font-size: 23rpx;
color: #666660;
}
.order-item{
margin-top: 50rpx;
display: flex;
flex-wrap: wrap;
}
.item{
text-align: center;
width: 25%;
margin-bottom: 20rpx;
}
.banner{
width: 710rpx;
height: 151rpx;
margin: 17rpx 0;
position: relative;
}
.banner image{
width: 710rpx;
height: 151rpx;
}
.banner-title{
position: absolute;
top: 40rpx;
left: 70rpx;
}
.top-title{
font-size: 20rpx;
color: #C09A74;
}
.bottom-title{
font-size: 30rpx;
margin-top: 7rpx;
}
.tool-item{
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 23rpx 0;
}
.tool-icon{
width: 58rpx;
height: 58rpx;
background-color: #D8D8D8;
vertical-align: middle;
}
.tool-desc{
font-size: 26rpx;
color: #666660;
display: inline-block;
margin-left: 23rpx;
vertical-align: middle;
}
.animation-element-wrapper {
width: 100%;
display: flex;
justify-content: center;
background-color: #ffffff;
}
.animation-element {
width: 200rpx;
height: 200rpx;
background-color: #1AAD19;
}
.animation-buttons {
padding: 30rpx 50rpx 10rpx;
width: 100%;
height: 200rpx;
box-sizing: border-box;
}
.animation-button {
float: left;
line-height: 2;
width: 300rpx;
margin: 15rpx 12rpx;
}
.animation-button-reset {
width: 620rpx;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment