微信小程序功能中心模块开发

目录

微信小程序创建项目配置底部导航栏 微信小程序滚动播放内容 微信小程序功能中心模块开发 微信小程序个人中心页面开发 微信小程序获取电话号码 微信小程序显示列表数据 微信小程序显示分页列表 微信小程序添加插屏广告 微信小程序添加激励式广告

最终效果可扫码查看 遇到问题可通过公众号留言反馈

概述

功能中心展示全部功能的入口，因为练手的小程序比较简单，只有两个主要功能，所以除了两个入口和一个更多功能的按钮，下方又增加展示了两个纵向滚动提示，和首页的布局代码一样。 请求的两个接口，第一个调整为新的接口http://yr.lootaa.com/ship/time/todayEnd，第二个没有变化，依旧使用http://yr.lootaa.com/time/channel/lately

新增

和之前相比，只新增了navigator的使用，url参数指定跳转的页面。

样式

@import "../index/weui.wxss";

page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}

.pages-row { 
  width: 100%; 
  display: flex; 
  flex-direction: row; 
  justify-content: space-around; 
 } 

 .pages-icon { 
  width: 100rpx; 
  height: 100rpx; 
 } 

 .pages-icon-wrapper { 
  display: flex; 
  justify-content: space-around; 
  align-items: center; 
  margin: 0rpx; 
  border-radius: 30%; 
  height: 70%; 
 } 

 .pages-item { 
  position: relative; 
  padding: 10rpx; 
  width: 33%; 
  background-color: #fff; 
  border: #ddd solid 1px; 
 } 
   
 .pages-text-wrapper { 
  text-align: center; 
 } 
   
 .pages-text { 
  font-weight: bolder; 
 } 

 .page-body{
  padding-top: 60rpx;
}
.page-section{
  width: 100%;
  margin-bottom: 60rpx;
}
.page-section_center{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-section:last-child{
  margin-bottom: 0;
}
.page-section-gap{
  box-sizing: border-box;
  padding: 0 30rpx;
}
.page-section-spacing{
  box-sizing: border-box;
  padding: 0 20rpx;
}
.page-section-title{
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.page-section-gap .page-section-title{
  padding-left: 0;
  padding-right: 0;
}

.demo-text-1{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #1AAD19;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-1:before{
  content: 'A';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-2{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #2782D7;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-2:before{
  content: 'B';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-3{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #F1F1F1;
  color: #353535;
  font-size: 36rpx;
}
.demo-text-3:before{
  content: 'C';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button{
  margin-bottom: 30rpx;
}
button:last-child{
  margin-bottom: 0;
}
.page-section-title{
  padding: 0;
}
.swiper-item{
  display: block;
  height: 150px;
}
.page-section-title{
  margin-top: 60rpx;
  position: relative;
}
.info{
  position: absolute;
  right: 0;
  color: #353535;
  font-size: 30rpx;
}
.page-foot{
  margin-top: 50rpx;
}

逻辑

Page({
  data: {
    list3:[],
    list4:[],
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: false,
    vertical: true,
    autoplay: true,
    circular: true,
    interval: 2000,
    duration: 500,
    previousMargin: 0,
    nextMargin: 0
  },
  onLoad: function () {
    var that=this;
    wx.request({
      url: 'http://yr.lootaa.com/ship/time/todayEnd',
      success (res) { 
        that.setData({
          list3: res.data.data.data
        })
        console.log(res.data.data.data)
      }
    })
    
    wx.request({
      url: 'http://yr.lootaa.com/time/channel/lately',
      success (res) {
        that.setData({
          list4: res.data.data
        })
        console.log(res.data.data)
      }
    })
  }
})

布局

  
    
      
        
      
      
        船动态
      
    
    
      
        
      
      
        出场时间
      
    
    
      
        
      
      
        更多
      
    
  

  
    
      今日新增船动态信息