小程序-滑动导航

Posted 2023-02-11 亮子zl

home1.wxml

<!--pages/home1/home1.wxml-->
<!--滑动导航-->
<view class="bg">
<view class="nav">
   <scroll-view class="scrollview" scroll-x="true">
      <view class="scrollview">
         <block wx:for="scrollviewTitle" wx:key="item">
            <view>
               <view class="currentIndex==index ? 'selected' : 'normal'" id="index" bindtap="changeCurrentIndex">
                 item               
               </view>
            </view>
         </block>
      </view>
   </scroll-view>
</view>
</view>
<!--滑动导航对应内容页面-->
<swiper current="currentIndex" style="height:winHeightrpx">
  <!--vip专享-->
   <swiper-item>
      <swiper-item scroll-y="true" style="winHeight-50rpx">
         <include src="vip.wxml"></include>
      </swiper-item>
   </swiper-item>
   <!--视频内容-->
   <swiper-item>
    <include src="video.wxml"></include>
   </swiper-item>
   <swiper-item>
    <include src="image.wxml"></include>
   </swiper-item>
   <swiper-item>
     <view>军事军事军事军事军事军事</view>
   </swiper-item>
   <swiper-item>
     <view>精华精华精华精华精华精华精华</view>
   </swiper-item>
   <swiper-item>
     <view>穿越穿越穿越穿越穿越穿越穿越</view>
   </swiper-item>
   <swiper-item>
     <view>爆料爆料爆料爆料爆料爆料爆料</view>
   </swiper-item>
</swiper>

home1.ts

Page(

  /**
   * 页面的初始数据
   */
  data: 
    scrollviewTitle:[
      'Vip专享','视频','图片','军事','精华','穿越','爆料'
    ],
    currentIndex:0,
    winHeight:100,
    vipTotalPages:2,
    vipPages:1,
    vipArray:[]  
  ,
  changeCurrentIndex:function(e)
    this.setData(
      currentIndex:e.currentTarget.id
    )
  ,

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() 
     //第一次加载vip内容时，加载第1页
     this.loadVip(this.data.vipPages);
  ,
  loadVip:function(pages)
     var url="https://m2.qiushibaike.com/article/list/text?type=refresh&count=12&page="+pages;
     wx.request(
       url:url,
       success:res=>
         console.log(res.data.items)
         var vipArr=[...this.data.vipArray,...res.data.items]
         this.setData(
           vipArray:vipArr
         )
         wx.getSystemInfo(
          success:(result)=>
            console.log(result.windowHeight);
            this.setData(
           //  winHeight:result.windowHeight * (vipArr.length*9)/4
           winHeight:result.windowHeight * vipArr.length * 1.8
            )
          ,
        )
        this.setData(
          vipPages:pages
        )
       
     );
     
    
  ,

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

  ,

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() 

  ,

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() 

  ,

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() 

  ,

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() 
     console.log("下拉")
     if(this.data.currentIndex==0)//vip
      this.loadVip(this.data.vipPages+1);
     
     if(this.data.currentIndex==1)//视频

     
  ,

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() 
     console.log("上推")
     if(this.data.currentIndex==0)//vip
      if(this.data.vipPages>this.data.vipTotalPages)
        wx.showToast(
          title:"到低了不能在加载了！"
        )
     else
      this.loadVip(this.data.vipPages+1);
     
      
     
     if(this.data.currentIndex==1)//视频

     
  ,

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() 

  
)

home1.json

  "usingComponents": ,
  "enablePullDownRefresh": true  

home1.wxss

/* pages/home1/home1.wxss */
.bg
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #ffba1e;
  color: #fff;

.nav
  width: 100%;
  height:100%;

.scrollview
  display: flex;
  margin-left: 20rpx;
  height:100%;

.selected,.normal
  width:140rpx;
  height:70rpx;
  line-height: 80rpx;
  text-align: center;
  padding: 0 20rpx;
  font-weight: bold;
  color: red;
  border-bottom: 5rpx solid white;

.normal
  color: black;
  border-bottom: none;

.hr
  width:100%;
  height:10rpx;
  background-color: #ccc;

vip.wxml

<block wx:for="vipArray" wx:key="item">
   <block>
      <view class="hr"></view>
      <view>
         item.id
      </view>
      <view class="head">
         <view>
         <image src="item.user.medium" style="height:100rpx;width:100rpx"></image>
        </view>
      </view>
      <view class="titel">
         <view>item.user.login</view>
      </view>
      <view class="comtemt">
           <view>item.content</view>
      </view>
      <view class="votes">
          点赞：item.votes.up/粢：item.votes.down/评论数:item.comments_count/转发数：item.share_count
      </view>
   </block>
</block>