头部导航栏也是动态的,板块里面的内容根据头部导航栏动态展现数据

头部导航栏也是动态的,板块里面的内容根据头部导航栏动态展现数据
头部导航栏也是动态的,板块里面的内容根据头部导航栏动态展现数据

大家请看上面这幅图,它惟妙惟肖,栩栩如生,真好看。嘿,醒一下,给大家讲解一下这张图的构造哈,头部三个导航栏,哦,不,它不是三个,有可能它是4,5个呢,不固定,不固定是什么意思呢,研发经理说,头部导航栏的数据不能在前台写死,要从后台数据库中拿,有几条给我展示几条,后台存什么展示什么,ok。明白。那就先从布局讲,应该不会只有一个导航栏吧,嗯,应该不会。

布局

布局采用flex,暂时定的数据是3条,我们可以把宽度先设置为33.333%,数据多的话横向滚动。因为数据库现在是只有三条数据。为了模拟横线滚动,将宽度设为50%设置了一下看效果图2,子元素要设置一下flex-shrink: 0;不缩放。

.container .tab-bar{
  height: 85rpx;
  display: flex;
  align-items: center;
  background: #fff;
  margin-top: 15rpx;
  overflow-x: auto;
  overflow-y: hidden;
}
.container .tab-bar view{
  flex-shrink: 0;
  width: 33.333%;
  height: 100%;
  line-height: 85rpx;
  text-align: center;
  box-sizing: border-box;
}
	<view class="tab-bar shadow">
		<view class="{{ num == index ? 'active' : ''}}" bindtap="tab" wx:for="{{tab}}" wx:key="index" data-index="{{index}}" data-column="{{item.columns}}">{{item.columns}}</view>
	</view>

下面讨论一下关于进入页面怎么请求数据,因为展示内容是根据导航栏的内容展示的,有多少坑就不说了,说一下最终的思路吧,因为我发现自己年纪轻轻已经开始爱絮叨了。

建议哈,所有请求接口的方法单独写,单独封装。

功能

  1. 第一步,肯定是要先请求tab即导航栏的数据了,
 // 获取tab栏
  gettab(){
    var app = getApp().globalData;   //获取全局变量
    var url = app.baseurlgzfw + apis.zskList  //定义接口地址 
    var params1 = {}
    netUtil.postRequest(url,params1,this.onStart2, this.onSuccess2, this.onFailed2)
    // 异步加载
    setTimeout(()=>{
      this.getlist()
    },500)

大家看到哈,里面有一个异步加载,我没有说定时器说异步加载大家应该很容易理解吧,说到这里简直要给自己加个鸡腿,这真的是我这个小白踩过几个坑才发现这个宝物的,(还是给大家啰嗦一下吧,因为虽然浅显易懂,但是我还是爱唠叨,这样也有助于自己思路再过一遍清晰流畅,后期看也能看懂,--------> 首先整个页面的数据都是请求的,而且后续的请求还要根据前面请求到的数据去当作参数请求,本来是写完gettab的时候写的getlist,自己心里给他定了个先后顺序,但是浏览器的请求几乎是同步的,前面请求的数据还没渲染,后面的请求就开始了,当然是没有获取到数据,为了让他获取到数据笨笨的我想到了加个延迟函数,让他延迟哪怕几毫秒,也就是说我前面的函数执行完了再执行下面的函数)

  1. 先给一个colunm值,让getlist请求接口时有参数,后续可以根据点击再变化
//在data中定义tab中的内容及当作的参数
this.setData({
      tab:res,
      column:res[0].columns    //先给一个colunm值,让getlist请求接口时有参数,后续可以根据点击再变化
    })
  1. 第二部,获取列表
  // 获取列表
  getlist(){
    var app = getApp().globalData;   //获取全局变量
    var urlgzfw = app.baseurlgzfw + apis.queryList  //定义接口地址 法律法规 
    var params = {
      "type": "9",
      "columns": this.data.column //1模块一、2模块二、3模块三
    }
    netUtil.postRequest(urlgzfw,params,this.onStart1, this.onSuccess1, this.onFailed1)
  },
  1. 点击tab更换data中的column,
// tab切换
  tab: function (e) {
    // 获取当前点击下标
    let index = e.currentTarget.dataset['index']
    this.setData({
      num: index,
      column:e.currentTarget.dataset.column
    })
    this.getlist()
  },
  1. 最后一步也可以理解为第一步,在页面加载时就请求接口
 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取tab栏
  this.gettab()
    // 获取列表
  },
  1. 接口
//知识库模块名称
(1)接口:/zskList.xhtml
(2)返回数据:
[
  {
    "columns": "null",
    "moduleName": "com.hyjx.business.gzfw"
  },
  {
    "columns": "B版块",
    "moduleName": "com.hyjx.business.gzfw"
  },
  {
    "columns": "A版块",
    "moduleName": "com.hyjx.business.gzfw"
  },
  {
    "columns": "C版块",
    "moduleName": "com.hyjx.business.gzfw"
  }
]
//列表
(1)接口:/queryList.xhtml
(2)传入参数示例:
{
  "type": "9",
"columns": "A版块"//通过上面接口查到的
}
(3)返回数据:
[
  {
    "id": "924b3be183d64b8bbde45bf470f96893",
    "title": "1231231231231",
    "content": "\u0026lt;p\u0026gt;asdasdasdaasd\u0026lt;/p\u0026gt;\r\n",//内容
    "lastdate": "2021-01-14 11:58:12.0",
    "columns": "A版块",//模块
    "source": "超级管理员",//来源
    "knowledgetype": "文化相关",//知识分类
    "moduleName": "com.hyjx.business.gzfw"
  },
     {
    "id": "d38345d13c904eac819598a5fcb69d3e",
    "title": "测试版块",
    "content": "\u0026lt;p\u0026gt;测试版块\u0026lt;/p\u0026gt;\r\n",
    "lastdate": "2020-12-23 16:50:31.0",
    "columns": "A版块",
    "source": "委办局账号",
    "knowledgetype": "经济相关",
    "moduleName": "com.hyjx.business.gzfw"
  },
 ]

总结

初步感觉实现没问题,想的很好,先获取tab的数据,然后根据tab中获取的数据请求list的数据,但是实现的时候一直没有数据,但是点击切换的时候有数据显示,分析原因就是初次加载函数的时候没有加载getlist函数,但是查看网络情况的时候是请求了的,只是传的参数为空,再深度分析,就可以理解为他俩是同时被加载的,加个小小的延迟函数完美解决,小小的延迟函数大大的影响力。

发表评论

评论已关闭。

相关文章