2022-08-10微信小程序实现换页

分析部分

切换的几个按钮

  <view class="header">
  <text class="{{currIndex==1?'yanse':''}}" bindtap="switch" data-index="1">路线</text>
   <!-- 利用三元运算符控制点击后按钮颜色变化 -->
  <!-- 自定义属性以及属性值 -->
  <text class="{{currIndex==2?'yanse':''}}"  bindtap="switch" data-index="2">美墅</text>
  <text class="{{currIndex==3?'yanse':''}}"  bindtap="switch" data-index="3">活动</text>
</view>

要展示的内容

 <view class="main1">
  <!-- 利用for训话遍历数据库的东西 -->
  <view class="nav" wx:for="{{list}}">
    <!-- {{ 动态绑定 }} -->
    <image src="{{item.imageUrl}}"></image>
    <text>{{item.title}}</text>
  </view>
</view>

js部分

页面的初始数据

data: {
  currIndex: 1,/*刚开始显示的页码 等一下通过它来变化页码*/
  list: [], /*存放从后台获得的数据*/
},

生命周期函数--监听页面加载

在页面加载的时候触发，只会调用一次，在onLoad() 函数中

onLoad() {
  this.getlist(); 当页面加载完毕时，就
},

点击事件

switch(event){
    //每次点击时，就获取自定义属性的属性值，并赋值给index
   let index = event.target.dataset.index;  
   this.setData({
      //同时把index给当前对象的currIndex
     currIndex: index
   })
  //赋值完成后，调用当前对象的getlis()函数
   this.getlist(); 
}, 

获取后台数据

箭头函数

getlist() {
  wx.request({
    //每次点击动态的改变链接后面的数值
    url: 'http://81.71.65.4:3006/discover/list?kind=0'+this.data.currIndex,
    success: (res) => {
      this.setData({
        //把从数据库中获取的数据给当前对象的list。
        list: res.data.result
      })
    }
  })
}, 

整体代码

wxml代码

<!-- 导航栏 -->
<view class="header">
 <text class="{{currIndex==1?'yanse':''}}" bindtap="switch" data-index="1">路线</text>
 <text class="{{currIndex==2?'yanse':''}}" bindtap="switch" data-index="2">美墅</text>
 <text class="{{currIndex==3?'yanse':''}}" bindtap="switch" data-index="3">活动</text>
</view>

<view class="main1">
  <!-- 利用for训话遍历数据库的东西 -->
  <view class="nav" wx:for="{{list}}">
  <!-- {{ 动态绑定 }} -->
  <image src="{{item.imageUrl}}"></image>
  <text>{{item.title}}</text>
  </view>
</view> 

js代码

Page({
  //页面的初始数据
  data: {
  currIndex: 1,
  list: [],
},

// 生命周期函数--监听页面加载
onLoad() {
  this.getlist();
},

//获取后台数据
getlist() {
  wx.request({
  url: 'http://81.71.65.4:3006/discover/list?kind=0' + this.data.currIndex,
  success: (res) => {
    this.setData({
      list: res.data.result
      })
    }
  })
},

switch (event) {
 let index = event.target.dataset.index;
 this.setData({
   currIndex: index
  })
 this.getlist();
  },
})