微信小程式初常
阿新 • • 發佈:2019-02-04
mypage.wxml
<!--pages/mypage/mypage.wxml-->
<!--容器-->
<!--hover-class='':長按樣式 -->
<view class='div' hover-class='div-tap'>
</view>
<!--滾動容器-->
<!--scroll-y="true":滾動條 -->
<scroll-view class='loang-div' scroll-y="true">
<!--text預設行內樣式 -->
<text >001</text>
<text>002</text>
<text>003</text>
<text>004</text>
<text>005</text>
<text>005</text>
<text>005</text>
<text>005</text>
<text>005</text>
<text>005</text>
<text>005</text>
<text >005</text>
<text>005</text>
<text>005</text>
<text>005</text>
<text>005</text>
<text>005</text>
</scroll-view>
<!--輪播圖 -->
<swiper autoplay="true" interval="5000">
<swiper-item class="img_baifenbai">
<image src ='https://img14.360buyimg.com/da/jfs/t19594/110/171012473/117163/74ff09d7/5a615d51N422b5e97.jpg' scaleToFill></image>
</swiper-item>
<swiper-item class="img_baifenbai">
<image src='https://m.360buyimg.com/babel/jfs/t17740/315/142089387/89546/66375573/5a5f2339Nc9568a20.jpg'></image>
</swiper-item>
</swiper>
mypage.wxss
/* pages/mypage/mypage.wxss */
.div{
width: 200rpx;
height: 200rpx;
background-color: skyblue;
border: 4px solid saddlebrown;
}
.div-tap{
background-color: deepskyblue;
}
.loang-div{
width: 400rpx;
height: 400rpx;
border: 4rpx solid yellowgreen;
display: flex;
flex-direction: column;
}
.loang-div text{
width: 300rpx;
display: block;
}
.swiper{
height: 450rpx;
width: 100%;
}
.img_baifenbai image{
height: 450rpx;
width: 100%;
}
app.json
{
"pages": [
"pages/mypage/mypage",
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarTitleText": "WeChat",
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": "下拉重新整理"
},
"tabBar": {
"position": "bottom",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "./comics/classify-a.png",
"selectedIconPath": "./comics/classify-a.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日誌",
"iconPath": "./comics/hot.png",
"selectedIconPath": "./comics/hot.png"
},
{
"pagePath": "pages/mypage/mypage",
"text": "日誌",
"iconPath": "./comics/hot.png",
"selectedIconPath": "./comics/hot.png"
}
]
}
}