夜光序言：
慢慢的才知道,太在乎别人了往往会伤害自己。慢慢的才知道,对自己好的人会随着时间的流逝越来越少 。慢慢的才知道,很多东西是可遇而不可求的,很多东西只能拥有一次。慢慢的才知道,那些嘻哈打闹只是消遣而已。慢慢的才知道,快乐常常来自回忆,而痛苦常常来自于回忆与现实的差距
正文：
以道御术 / 以术识道
我们需要学会把之前学的东西举一反三
很多程序员都是通过一次深入学习，来演变成各种形式的其他项目
我们再来玩一个小案例
扫描二维码关注公众号，回复：
10786275 查看本文章
<!--pages/index/index.wxml-->
<view class="index-container">
<image class="logo" src="../images/1.jpg" mode="widthFix"></image>
<text class="username">GeniusTeam</text>
<view class="btn">
<text>和动漫分享时光</text>
</view>
</view>
/* 经验之谈
1. 如果需要动态改变样式，使用行内样式
2. 小程序对弹性盒子支持很好，建议使用
3. rpx相当于rem
*/
.index-container{
display: flex;
flex-direction: column;
align-items: center;
}
.index-container .logo{
width: 600rpx;
height: 96rpx;
margin-top: 196rpx;
}
.index-container .username{
margin-top: 100rpx;
font-size: 60rpx;
font-weight: 700
}
.index-container .btn{
border: 1px solid #109D59;
margin-top: 100rpx;
padding: 10px 20px;
border-radius: 5px;
}
事件是什么，这在前端领域很重要
<!--pages/index/index.wxml-->
<view class="index-container">
<image class="logo" src="../images/1.jpg" mode="widthFix"></image>
<text class="username">GeniusTeam</text>
<view class="btn" bindtap="getNews">
<text>和动漫分享时光</text>
</view>
</view>
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
getNews : function(event){
// console.log("跳转");
wx.navigateTo({
url: '../news/news',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
效果如上图所示~
<!--pages/news/news.wxml-->
<view class="news-container">
<swiper indicator-dots="{{indicatorDots}}" autoplay indicator-color="{{indicatorColor}}" circular="true">
<swiper-item>
<image src="../images/23.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<image src="../images/4.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<image src="../images/5.jpg" mode="widthFix"></image>
</swiper-item>
</swiper>
<view class="articlelist">
<view class="author-time">
<image class="author-icon" src="../images/3.png" mode="widthFix"></image>
<text class="author-name">GeniusTeam</text>
<text class="author-time">2020/3/9</text>
</view>
<text class="title">三十年河东三十年河西，莫欺少年穷</text>
<image class="article-img" src="../images/30.jpg" mode="widthFix"></image>
<text class="article-text">传说在那世界开辟时，曾有一生灵诞生，号称祖龙，吞天灭地，乃是至高般的存在，祖龙最后身化万物，从此混沌世界中有了诸多生命出现。</text>
<view class="article-like">
<image class="article-like-icon" src="../images/b.jpg" mode="widthFix"></image>
<text class="article-like-text">11</text>
<image class="article-like-icon" src="../images/a.jpg" mode="widthFix"></image>
<text class="article-like-text">11</text>
</view>
</view>
</view>/* pages/news/news.wxss */
.news-container swiper{
width: 100%;
height: 350rpx;
}
/* 文章的样式 */
.articlelist{
display: flex;
flex-direction: column;
margin-top: 20rpx;
margin-bottom: 40rpx;
background-color: #fff;
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
padding: 10px;
padding-bottom: 5px;
}
.author-time{
margin-top: 10rpx;
margin-bottom: 20rpx;
}
.author-icon{
width: 60rpx;
height: 60rpx;
/* 上下垂直居中 */
vertical-align: middle;
}
.author-name{
margin-left: 20rpx;
}
.author-time{
margin-left: 20rpx;
vertical-align: middle;
margin-bottom: 5px;
font-size: 26rpx;
}
.title{
font-size: 38rpx;
font-weight: 700;
color: #333;
margin-bottom: 10px;
}
.article-img{
margin-left: 16px;
width: 100%;
height: 340rpx;
margin: auto 0;
margin-bottom: 10px;
}
.article-text{
color: #666;
font-size: 26rpx;
margin-bottom: 20rpx;
letter-spacing: 2rpx;
line-height: 40rpx;
}
.article-like{
font-size: 13px;
flex-direction: row;
line-height: 16px;
}
.article-like-icon{
height: 16px;
width: 16px;
margin-right: 8px;
vertical-align: middle;
}
.article-like-text{
vertical-align: middle;
margin-right: 20px;
}
// pages/news/news.js
Page({
/**
* 页面的初始数据
*/
data: {
indicatorDots:"true",
indicatorColor:"pink"
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})