ジャンゴ+ wxxcx4

ホームと下部のナビゲーションバーアプレット
指数+ TabBarの
ASSENTアイコンコードを記憶することができアリDOWNLOAD

小さなディレクトリ構造

1. 納得
2. ページ
3. utilsの
4. app.js
5. app.json
6. app.wxss
7. jsconfg.json
8. project.config.json
9. sitemap.json

1pagesは、ディレクトリ名を作成し、ページパケットを作成する
2の最小値を作成するために、2つのニーズを、3人は良い視覚効果をお勧めします

ホームindex.wxml

!-- 轮播 -->
<swiper indicator-color="#fff" indicator-dots="true" circular="true" interval="5000" autoplay="true">
  <swiper-item wx:for="{{imglist}}">
    <image src="{{item}}"></image>
  </swiper-item>
</swiper>
<!-- 选项框 -->
<view class="container">
  <view class="list">
    <view class="item">
      <view class="left">
        <view class="title">1111</view>
        <view class="entitle">2222</view>      
      </view>
      <view class="iconfont icon-tousujianyi"></view>
    </view>
    <view class="item">
      <view class="left">
        <view class="title">3333</view>
        <view class="entitle">4444</view>      
      </view>
      <view class="iconfont icon-buoumaotubiao46"></view>
    </view> 
    <view class="item">
      <view class="left">
        <view class="title">5555</view>
        <view class="entitle">6666</view>      
      </view>
      <view class="iconfont icon-icon1"></view>
    </view>  
  </view>
</view>
<!-- 底部公告 -->
<view class="dibugg">
  <view class="title">公告栏</view>
  <image class="adv" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3352886703,1680374033&fm=26&gp=0.jpg"></image>
</view>
  

index.wxss

@import "/assets/fonts/iconfont.wxss";
swiper,swiper-item image{
  width:100%;
  height: 400rpx;
  border-radius: 50rpx 50rpx 50rpx 50rpx;
}
.container{
  padding: 30rpx;
}
.container .list{
  height: 400rpx;
}
.container .list .item{
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding: 20rpx;
}
.container .list .item .title{
  font-size: 30rpx;
  color: #000;
  font-weight: bold;
}
.container .list .item .entitle{
  font-size:24rpx;
  color: #ccc;
  margin-top:10rpx;
}
.iconfont{
  border: 1px solid rgb(185, 211, 228);
  font-size: 40rpx;
  padding: 10rpx;
  border-radius: 50%;
  color: rgb(185, 211, 228);
}
.dibugg{
  padding: 30rpx;
  height: 600rpx;
}
.dibugg .title{
  font-size: 30rpx;
  color: #000;
  font-weight: bold;
}
.adv{
  height: 200rpx;
  width: 100%;
}

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imglist:[
      "图片的url",
       "图片的url",
        "图片的url",
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

下部のナビゲーションバー

"tabBar": {
    "position": "bottom",
    "borderStyle": "white",
    "color": "#bfbfbf",
    "selectedColor": "#2c2c2c",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "名字",
        "iconPath": "pages/icons/index01.png",
        "selectedIconPath": "pages/icons/index02.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "个人",
        "iconPath": "pages/icons/mine01.png",
        "selectedIconPath": "pages/icons/mine02.png"
      }
    ]
  },