1. 程式人生 > >微信小程式初常

微信小程式初常

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"
      }
    ]
  }
}