django+wxxcx4

Home and bottom navigation bar applet
index + the TabBar
the ASSENT icon code can be stored Ali DOWNLOAD

Small directory structure

1. assent
2. pages
3. utils
4. app.js
5. app.json
6. app.wxss
7. jsconfg.json
8. project.config.json
9. sitemap.json

1pages create a directory name, and then create a page packet
2 needs to create a minimum of two, three recommend a good visual effects

Home 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 () {
    
  }
})

Bottom navigation bar

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