Commit b047a668 authored by sujie@126.com's avatar sujie@126.com

dd

parent eab5687f
{
"pages": [
"ucenter/index",
"business/pages/webview/index"
"business/pages/webview/index",
"src/pages/tabindex/index"
],
"subpackages": [
{
......
// components/tab/index.js
Component({
/**
* 组件的属性列表
*/
options: {
multipleSlots: true
},
properties: {
currentIndex: {
type: Number,
value: 0,
observer: 'setCurrentIndex',
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
//点击tab触发
handleTab(e) {
const {
currentIndex,
} = this.data;
const {
index
} = e.currentTarget.dataset;
if (index == null || index == undefined) return false;
this._trigger('onChange', index);
if (index == currentIndex) return;
this.setData({
currentIndex: index
});
},
_trigger(name, value) {
this.triggerEvent(name, {
value,
});
},
}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--components/tab/index.wxml-->
<view class="wrapper">
<view class="tab-header">
<view class="tab-item" data-index="{{0}}" bindtap="handleTab">
<slot name="tab-left"></slot>
</view>
<view class="tab-item" data-index="{{1}}" bindtap="handleTab">
<slot name="tab-right"></slot>
</view>
</view>
<view class="tab-content">
<view class="tab-content-inner" style="{{currentIndex == 0 ? '' : ' transform:translateX(-50%)'}}">
<view class="content-left" style="{{currentIndex == 0 ? '' : 'height: 0;'}}">
<slot name="tcontent-left"></slot>
</view>
<view class="content-right" style="{{currentIndex == 1 ? '' : 'height: 0;'}}">
<slot name="tcontent-right"></slot>
</view>
</view>
</view>
</view>
/* components/tab/index.wxss */
.tab-header{
display: flex;
}
.tab-header .tab-item{
flex: 1;
text-align: center;
}
.tab-content{
width: 100%;
overflow: hidden;
}
.tab-content-inner{
width: 200%;
position: relative;
display: flex;
transition: transform .5s;
/* transform:translateX(-50%) */
}
.tabAnimate1{
transform:translateX(0)
}
.tab-content-inner .content-left{
width: 100%;
}
.tab-content-inner .content-right{
width: 100%;
}
\ No newline at end of file
// src/pages/tabindex/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"usingComponents": {
"tab": "../../../components/tab"
},
"navigationBarTitleText": ""
}
\ No newline at end of file
<!--src/pages/tabindex/index.wxml-->
<view class="container">
<tab>
<view slot="tab-left">简介</view>
<view slot="tab-right">目录</view>
<view slot="tcontent-left">
<view>1dsaaaaaaaaaaaaaaaaaaadddddddddddddddddas</view>
<view>1dsaaaaaaaaaaaaaaaaaaadddddddddddddddddas</view>
<view>1dsaaaaaaaaaaaaaaaaaaadddddddddddddddddas</view>
<view>1dsaaaaaaaaaaaaaaaaaaadddddddddddddddddas</view>
</view>
<view slot="tcontent-right">
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
<view>阿三大苏打阿德飒飒的大师傅发射点</view>
</view>
</tab>
</view>
/* src/pages/tabindex/index.wxss */
\ No newline at end of file
......@@ -137,7 +137,20 @@ Page({
onReachBottom: function () {
},
onPageScroll: function (e){
if(this.data.curTabIndex == 0){
return;
}
const scrollTop = e.scrollTop;
if(scrollTop > 400){
this.setData({
searchInnerShow: 0
})
}
this.setData({
showSeachBtn: scrollTop > 400 ? true : false,
})
},
/**
* 用户点击右上角分享
*/
......@@ -303,7 +316,8 @@ Page({
})
},
tabChange(e){
const { index } = e.target.dataset;
const index = e.detail.value;
console.log(e,' e.target.dataset')
let sortDailogShow = this.data.sortDailogShow;
if(index == undefined){
return
......
......@@ -4,6 +4,7 @@
"list-loading": "../../../components/listloading",
"empty-content": "../../../components/emptycontent",
"clock-item": "../../components/newclockitem",
"w-segmented-control": "../../../dist/w-segmented-control/index"
"w-segmented-control": "../../../dist/w-segmented-control/index",
"tab": "../../../components/tab"
}
}
\ No newline at end of file
......@@ -147,7 +147,8 @@
border-bottom: 2rpx solid rgba(247,247,249,1);
}
.content-box .tab-box .tab-item{
.content-box .tab-item{
height: 96rpx;
flex: 1;
font-size:26rpx;
font-family:PingFangSC-Medium,PingFang SC;
......@@ -159,18 +160,18 @@
align-items: center;
justify-content: center;
}
.content-box .tab-box .tab-item image{
.content-box .tab-item image{
width: 20rpx;
height: 18rpx;
vertical-align: middle;
margin-left: 4rpx;
}
.content-box .tab-box .act-tab{
.content-box .act-tab{
color:rgba(249,187,0,1);
font-weight: bold;
animation: fontWeight .2s forwards;
}
.content-box .tab-box .tab-item .sort-dailog{
.content-box .tab-item .sort-dailog{
width: 190rpx;
height: 212rpx;
position: absolute;
......@@ -179,7 +180,7 @@
bottom: -212rpx;
z-index: 1;
}
.content-box .tab-box .tab-item .sort-dailog .sort-bg{
.content-box .tab-item .sort-dailog .sort-bg{
width: 190rpx;
height: 212rpx;
position: absolute;
......@@ -187,7 +188,7 @@
top: 0;
z-index: -1;
}
.content-box .tab-box .tab-item .sort-dailog .sort-item1{
.content-box .tab-item .sort-dailog .sort-item1{
height: 102rpx;
padding-top: 54rpx;
text-align: center;
......@@ -196,7 +197,7 @@
font-weight:400;
color:rgba(114,114,114,1);
}
.content-box .tab-box .tab-item .sort-dailog .sort-item2{
.content-box .tab-item .sort-dailog .sort-item2{
height: 108rpx;
padding-top: 40rpx;
text-align: center;
......@@ -205,15 +206,16 @@
font-weight:400;
color:rgba(114,114,114,1);
}
.content-box .tab-box .tab-item .sort-dailog .actSort{
.content-box .tab-item .sort-dailog .actSort{
color:rgba(249,187,0,1);
}
.content-box .swiper-wrapper {
height: calc(100vh - 328px);
/* height: calc(100vh - 328px); */
overflow: hidden;
}
.content-box .swiper-wrapper swiper{
height: calc(100vh - 328px);
position: relative;
/* height: calc(100vh - 328px);
position: relative; */
}
.content-box .swiper-wrapper .search-btn{
width: 112rpx;
......@@ -226,7 +228,7 @@
width: 112rpx;
height: 112rpx;
}
.content-box .swiper-wrapper .search-box-up{
.content-box .search-box-up{
width:80rpx;
height:80rpx;
background:linear-gradient(135deg,rgba(251,216,68,1) 0%,rgba(250,203,56,1) 100%);
......@@ -235,24 +237,24 @@
display: flex;
align-items: center;
padding-left: 40rpx;
position: absolute;
position: fixed;
right: 32rpx;
top: 16rpx;
}
.content-box .swiper-wrapper .search-Show{
.content-box .search-Show{
animation: seachWidthShow .3s forwards;
}
.content-box .swiper-wrapper .search-Hide{
.content-box .search-Hide{
animation: seachWidthHide .3s forwards;
}
.content-box .swiper-wrapper .search-box-up .up-text{
.content-box .search-box-up .up-text{
width: 200rpx;
font-size:28rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
}
.content-box .swiper-wrapper .search-box-up image{
.content-box .search-box-up image{
width: 112rpx;
height: 112rpx;
position: absolute;
......@@ -260,7 +262,7 @@
top: -18rpx;
z-index: 1;
}
.content-box .swiper-wrapper .search-box-up input,.placeholder-class{
.content-box .search-box-up input,.placeholder-class{
font-size:28rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
......@@ -268,8 +270,9 @@
flex: 1;
}
.content-box .introduction{
height: calc(100vh - 328px);
/* height: calc(100vh - 328px); */
padding: 36rpx 12rpx 36rpx 12rpx;
overflow: hidden;
}
.content-box .introduction .img-box{
margin-bottom: 26rpx;
......@@ -412,10 +415,11 @@
color:rgba(255,255,255,1);
}
.content-box .catalog{
height: calc(100vh - 640rpx);
overflow: hidden;
padding-top: 30rpx;
}
.catalog-list{
overflow: hidden;
padding: 0 26rpx;
}
.catalog-list .catalog-item{
......@@ -487,7 +491,7 @@
font-weight:400;
color:rgba(183,184,182,1);
}
.content-box .catalog .search-box{
.content-box .search-box{
display: flex;
margin: 0 26rpx 0 24rpx;
align-items: center;
......@@ -549,7 +553,7 @@
animation: updownDebounce 1s linear infinite;
position: relative;
}
.content-box .catalog .search-box .input-box{
.content-box .search-box .input-box{
width:572rpx;
height:58rpx;
border-radius:30rpx;
......@@ -559,15 +563,15 @@
align-items: center;
padding: 0 30rpx;
}
.content-box .catalog .search-box .input-box input{
.content-box .search-box .input-box input{
width: 100%;
}
.content-box .catalog .search-box .input-box .seach-icon{
.content-box .search-box .input-box .seach-icon{
width:30rpx;
height:30rpx;
margin-right: 26rpx;
}
.content-box .catalog .search-box .btn-box{
.content-box .search-box .btn-box{
width:92rpx;
height:56rpx;
background:rgba(249,187,0,1);
......
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