Skip to content

Y
yma16_miniprogram

yma16 / yma16_miniprogram

通知 11
Star 1
Fork 0
Y
yma16_miniprogram
提交 9b778f1f 编写于 作者: yma16's avatar yma16
浏览文件
操作

markdown

上级 af02b6a4
显示空白变更内容
内联 并排
Showing with 175 addition and 21 deletion
miniprogram/pages/home/home.js
浏览文件 @ 9b778f1f
// pages/home/home.js
//获取应用实例
const app = getApp();
Page({
/**
......@@ -17,7 +19,12 @@ Page({
interval: 5000,
duration: 1000,
menuIsShow:false,
bottomBtn:'front'
bottomBtn:'front',
titleObj:[],
baseUrl:'https://yongma16.xyz/api/',
path:'article/index/',
currentArticleId:0,
currentArticleTitle:''
},
// 监听
watch:{
......@@ -25,6 +32,53 @@ Page({
console.log('监听',newVal,oldVal)
}
},
/**
* 获取文章
*/
clickBlogTitleBtn(e){
const {id,title}=e.currentTarget.dataset
this.setData({
currentArticleId:id,
currentArticleTitle:title
})
this.getRemoteArticleById(id)
},
/**
* 获取文章
* @param {*} id
*/
getRemoteArticleById(id){
const blogComponent=this.selectComponent('#blog-id')
blogComponent.setLoading(true)
const baseUrl=this.data.baseUrl
const path=this.data.path
const headers = {'Content-Type':'application/json;charset=UTF-8'}
const params={
value:id
}
wx.request({
url: baseUrl+path,
headers:headers,
data:params,
method:'POST',
success: (res) => {
const data=res.data
const articleStr=data&&data.article[0]
blogComponent.setArticleNode(articleStr)
}
});
},
/**
* 更新菜单
* @param {Element} e
*/
updateArticleMenu(e){
console.log('info info',e.detail),
this.setData({
titleObj:e.detail
})
},
// 自定义函数
changeIndicatorDots() {
this.setData({
......@@ -65,18 +119,33 @@ Page({
},
// 导航的按钮
clickBottomBtn(e){
const label=e.currentTarget.dataset.label||'front'
console.log('click',label)
const label=e.currentTarget.dataset.label||this.data.bottomBtn
if(label==='target'||label==='life'){
return
}
this.setData({
bottomBtn:label
})
},
getRemoteData(){
console.log('进入home页面' ,12431243)
let url='https://yongma16.xyz/api/'
let path='article/index/'
wx.request({
url: url+path,
method:'GET',
success: (res) => {
console.log('res2222',res)
}
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('进入home页面' ,12431243)
this.getRemoteData()
},
/**
......
miniprogram/pages/home/home.wxml
浏览文件 @ 9b778f1f
<!--pages/home/home.wxml-->
<view class="container">
<view class="container-menu-expand" wx:if="{{!menuIsShow}}">
<view class="container-menu-expand" wx:if="{{!menuIsShow&&bottomBtn==='blog'}}">
<view class="arrow-left" bindtap="menuSwitch"></view>
</view>
<view class="container-menu-mask" wx:if="{{menuIsShow}}"></view>
<view class="container-menu" wx:if="{{menuIsShow}}">
<view class="arrow-right" bindtap="menuSwitch"></view>
<view class="btn-ul">
<text>这是菜单</text></view>
记忆碎片</view>
<block wx:for="{{titleObj}}" wx:key="*this">
<view class="blog-title {{currentArticleId===item.id? 'title-actived':''}}" bindtap="clickBlogTitleBtn" data-title="{{item.title}}" data-id="{{item.id}}">{{item.title}}</view>
</block>
</view>
<view class="caontainer-header" wx:if="{{bottomBtn==='front'}}">
<view class="swiper">
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{ autoplay }}" interval="{{interval}}" duration="{{duration}}">
autoplay="{{ autoplay }}" interval="{{interval}}" duration="{{duration}}" class="swiper-design">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item.class}}">
......@@ -25,17 +28,16 @@
</view>
<view class="container-content">
倒计时 {{content}}
<home-content class='home-content-class' headerItem='{{content}}' wx:if="{{bottomBtn==='front'}}"></home-content>
<blog class='home-content-class' wx:if="{{bottomBtn==='blog'}}"></blog>
<blog class='home-content-class' id="blog-id" wx:if="{{bottomBtn==='blog'}}" bind:updateArticleMenu="updateArticleMenu"></blog>
<future class='home-content-class' wx:if="{{bottomBtn==='target'}}"></future>
<life class='home-content-class' wx:if="{{bottomBtn==='life'}}"></life>
</view>
<view class="container-footer">
<view class="container-footer-btn-menu">
<view class="default-btn active {{bottomBtn==='front'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='front'>前端</view>
<view class="default-btn active {{bottomBtn==='front'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='front'>主页</view>
<view class="default-btn active {{bottomBtn==='blog'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='blog'>博客</view>
<view class="default-btn active {{bottomBtn==='target'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='target'>方向</view>
<view class="default-btn active {{bottomBtn==='target'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='target'>未来</view>
<view class="default-btn active {{bottomBtn==='life'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='life'>生活</view>
</view>
</view>
......
miniprogram/pages/home/home.wxss
浏览文件 @ 9b778f1f
......@@ -8,10 +8,11 @@ page {
}
.container{
position: relative;
width: 100%;
height:100%;
background: rgb(255, 255, 255);
width: 100vw;
height:100vh;
background: #1c92d2;
}
/* 箭头 //上右边下左 */
.arrow-left{
width: 0;
......@@ -19,6 +20,7 @@ page {
border: 20px solid;
border-color: transparent transparent transparent rgb(255,255,255);
position: relative;
opacity: .8;
cursor: pointer;
}
.arrow-left::after{
......@@ -27,6 +29,7 @@ page {
top: -20px;
left: -23px;
border: 20px solid;
opacity: .8;
border-color: transparent transparent transparent rgb(0, 183, 255);
}
......@@ -37,6 +40,7 @@ page {
border: 20px solid;
border-color: transparent rgb(255,255,255) transparent transparent;
position: relative;
opacity: .8;
cursor: pointer;
}
.arrow-right::after{
......@@ -45,6 +49,7 @@ page {
top: -20px;
right: -23px;
border: 20px solid;
opacity: .8;
border-color: transparent rgb(0, 183, 255) transparent transparent;
}
/* 左侧的菜单 */
......@@ -63,6 +68,17 @@ page {
margin-top:40px;
margin-left:10px;
}
.blog-title {
margin-left:10px;
margin-top:5px;
}
.blog-title:hover{
cursor: pointer;
color:#1c92d2;
}
.title-actived{
color:#1c92d2 !important;
}
/* mask */
.container-menu-mask{
position: absolute;
......@@ -85,6 +101,9 @@ page {
height:150px;
display: flex;
}
/* .swiper-design:active,.swiper:active{
background-color: #ffffff !important;
} */
/* 嵌入表头图案 */
.swiper{
position: relative;
......@@ -100,13 +119,13 @@ page {
height: 100%;
}
.header-swiper-one{
background-color: rgba(158, 209, 238,.4);
background-color: rgba(0, 183, 255,.8);
}
.header-swiper-two{
background-color: rgba(158, 209, 238,.5);
background-color: rgba(0, 183, 255,.9);
}
.header-swiper-three{
background-color: rgba(158, 209, 238, 0.6);
background-color:rgba(0, 183, 255,1);
}
.caontainer-header content-title{
......@@ -135,18 +154,82 @@ page {
display: flex;
flex-wrap: nowrap;
width:100vw;
background-color: white;
/* border:1px solid rgb(255, 136, 0); */
bottom:0;
}
.default-btn{
position: relative;
width:25%;
border:1px solid antiquewhite;
font-size: 1em;
color: #000000;
border:1px dotted transparent;
/* border-right:1px solid rgb(255, 136, 0); */
text-align: center;
height:100%;
height:60px;
line-height: 60px;
}
.default-btn:active{
background-color: rgb(8, 113, 252);
background-color:rgb(8, 183, 252);
color:#ffffff;
}
.btn-actived{
background-color: rgb(8, 113, 252);
color:#ffffff;
background-color: rgb(8, 183, 252);
border:1px solid rgb(8, 183, 252);
box-shadow: 0 5px 5px 5px rgba(8, 183, 252,.5);
}
/* loading */
.loader-child {
position: absolute;
width: 100px;
height: 100px;
box-sizing: border-box;
border-radius: 50%;
}
.loader-child:nth-of-type(1) {
left: 0%;
top: 0%;
animation: rotate-one 1.15s linear infinite;
border-bottom: 3px solid #1c92d2;
}
.loader-child:nth-of-type(2) {
right: 0%;
top: 0%;
animation: rotate-two 1.15s linear infinite;
border-right: 3px solid #1c92d2;
}
.loader-child:nth-of-type(3) {
right: 0%;
bottom: 0%;
animation: rotate-three 1.15s linear infinite;
border-top: 3px solid #1c92d2;
}
@keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或