小程序项目网易云（二）

一，排行榜模块（轮播列表），发送请求，获取数据

1,1， 在onload中发送请求，此时需要用到循环，传入的idx参数不同，发送请求获取到的数据也不同

响应数据是一个数组，里头有个name属性，有个tracks数组

 

    let ids = [0, 1, 2, 3];
    // let index=0;
    let topList = [];
    // 循环发送请求，方式一
    // while(index<ids.length){
    //   let res = await request("/top/list",{idx:ids[index++]})
    //     // .then((res)=>{
    //   let topData={};
    //   topData.name=res.playlist.name;
    //   // 三个对象
    //   topData.musicList=res.playlist.tracks.slice(0,3);
    //   topList.push(topData)
    //   this.setData({
    //     // topList:[...this.data.topList,topData]
    //     topList
    //   })
    // })

      // 方式二
    for (var i = 0; i < ids.length; i++) {
        let res = await request('/top/list', {idx:i})
        let topData = {}
        topData.name = res.playlist.name
　　　　　　//清除多余的数组对象，我们只要前三个
        topData.musicList = res.playlist.tracks.slice(0,3)
        topList.push(topData)
        this.setData({
          topList
        })
    }

 在data赋值

 data: {
    bannerList: [],
    topList: [],
  },

1.2, 填充数据，

next-margin：后边距，可用于露出后一项的一小部分

  <!-- 排行榜区域 -->
  <view class="topContainer">
    <NavHeader title="排行榜" content="热歌风向标"/>
    <swiper class="topSwiper" next-margin="50rpx">
      <swiper-item wx:for="{{topList}}" wx:key="name">
        <view class="topItem">
          <view class="topTitle">{{item.name}}  </view>
          <view class="topContent" wx:for="{{item.musicList}}" wx:for-item="musicItem" wx:for-index="musicIndex" wx:key="id">
            <image class="topImg" src="{{musicItem.al.picUrl}}"></image>
            <text class="topNum">{{musicIndex+1}}</text>
            <text class="topName">{{musicItem.al.name}}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>

 

wxss，

1，swiper组件默认高度为150px,需要设置下高度

2.如果父级开启了flex,如果几个子元素的宽度相加大于父元素的宽度，那么会压缩子元素的宽度，此时需要用到flex-shrink: 0; 不压缩子元素的宽度

 

 

 

.topContainer{
  padding:0 20rpx;
}

.topContainer .topSwiper{
  height:624rpx;
}

.topContainer .topSwiper .topItem{
background: #fbfbfb;
width:96%;
border-radius:10rpx;
}

.topContainer .topSwiper .topItem .topTitle{
  font-size:26rpx;
  padding-bottom: 20rpx;
}

.topContainer .topSwiper .topItem .topContent{
  display:flex;
  align-items: center;
  height:100rpx;
  margin:20rpx 0;
}

.topContainer .topSwiper .topItem .topContent .topImg{
  width:100rpx;
  height:100rpx;
  border-radius: 10rpx;
  /* 父级开启flex,子元素不压缩 */
  flex-shrink: 0;
}

.topContainer .topSwiper .topItem .topContent .topNum{
  width:100rpx;
  height:100rpx;
  text-align: center;
  line-height: 100rpx;
  flex-shrink: 0;
}

.topContainer .topSwiper .topItem .topContent .topName{
　　//单行文本换行且省略
  overflow:hidden;
  text-overflow: ellipsis;

　　/* 开启不换行 */

  white-space: nowrap;
}

 

二，底部导航（tabbar配置设置）（框架--全局配置---tabbar）

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

list,tab的列表，最少 2 个、最多 5 个 tab

在app.json中配置

 "tabBar": {
    "color": "#333",
    //选中的颜色
    "selectedColor": "#d43c33",
    "list": [
      {
        页面路径
        "pagePath": "pages/index/index",
        "text": "主页",
        // 没有选中的图片
        "iconPath": "/static/images/tabs/tab-home.png",
        // 选中的图片
        "selectedIconPath": "/static/images/tabs/tab-home-current.png"
      },
      {
        "pagePath": "pages/video/video",
        "text": "视频",
        "iconPath": "/static/images/tabs/select.png",
        "selectedIconPath": "/static/images/tabs/selected.png"
      },
      {
        "pagePath": "pages/personal/personal",
        "text": "个人中心",
        "iconPath": "/static/images/tabs/tab-my.png",
        "selectedIconPath": "/static/images/tabs/tab-my-current.png"
      }
    ]
  }

 

三，个人中心模块，页面下拉实现

新建personal页面，

1.有三个事件，手指按下事件bindtouchstart,   手指移动事件bindtouchmove, 手指抬起事件，bindtouchend

2.下拉的距离，用transform实现， 过渡的效果用transition实现

3.移动端获取手指的位置，event.touches[0].clientY;

 

personal.wxml

  <view class="cover-container" bindtouchstart="handleStart" bindtouchmove="handleMove" bindtouchend="handleEnd" style="transform:translateY({{moveDistance}}rpx);transition:{{moveTransition}}">
    <image class="arc" src="/static/images/personal/arc.png"></image>

 

personal.js

  //用于处理cover-container的手指按下事件
  handleStart(event) { 
    // 获取手指按下的位置
    this.startY = event.touches[0].clientY;
    // 每次手指按下，上一次手指的过渡消失
    this.setData({
      moveTransition:"none"
    })
 
  },
  //用于处理cover-container的手指移动事件
  handleMove(event) {
    // 获取手指移动的位置
    this.moveY = event.touches[0].clientY;
    // 获取手指移动的距离
    let moveDistance = Math.floor(this.moveY-this.startY);
    // 边界值判断
    if (moveDistance <= 0) return;
    if (moveDistance >= 80)return ;
    this.setData({
      moveDistance
    })
   
  },
  //用于处理cover-container的手指抬起事件
  handleEnd(){
    this.setData({
      // 手指抬起回到原位
      moveDistance:0,
      // 添加过渡效果
      moveTransition:"transform 1s linear"
    })
  },

  data: {
    moveDistance:0,
    moveTransition:"none",

 

四，个人中心模块（播放记录实现）

利用scroll-view实现卡片切换效果

1.如果有播放记录展示播放记录的图片，如果没有展示暂无数据

 <view class="playList">
        <view class="playTitle">最近播放</view>
        <scroll-view class="playScroll" scroll-x enable-flex wx:if="{{playList}}">
          <!-- <view><image src="/static/images/nvsheng.jpg"></image></view> -->
          <image src="/static/images/nvsheng.jpg"></image>
          <image src="/static/images/nvsheng.jpg"></image>
          <image src="/static/images/nvsheng.jpg"></image>
          <image src="/static/images/nvsheng.jpg"></image>
          <image src="/static/images/nvsheng.jpg"></image>
          <image src="/static/images/nvsheng.jpg"></image>
          <image src="/static/images/nvsheng.jpg"></image>
          <image src="/static/images/nvsheng.jpg"></image>
        </scroll-view>
        <view class="noData" wx:else>暂时没有数据</view>
      </view>

wxss

.playList .playTitle{
  font-size:24rpx;
  color:#333;
  /* 文本缩进 */
  text-indent: 20rpx;
  padding:20rpx;
}

.playList .playScroll{
  display:flex;
  height:200rpx;
  /* 不换行 */
  flex-wrap:nowrap;
  /* white-space:nowrap; */
}

.playList .playScroll image{
  width:160rpx;
  height:160rpx;
  margin-left: 20rpx;
  /* 父级开启flex,子元素不被压缩 */
  flex-shrink: 0;
}

.playList .noData{
  line-height:160rpx;
  /* 文本缩进 */
  text-indent: 40rpx;
}

 data: {
    moveDistance:0,
    moveTransition:"none",
    playList:null
  },

 

五，用户登录模块，获取登录的用户名和密码

1.绑定change事件，设置自定义属性data-type="username" ，然后在函数可以获取该属性值

2.wx.showToast（）为小程序的一个表单验证

  

 

 <view class="input-content">
      <view class="input-item">
        <text class="tit">手机号码</text>
        <input id="phone" type="text" 
        bindchange="handleChange"  
        data-type="username" 
        placeholder="请输入手机号码"/>
      </view>
      <view class="input-item">
        <text class="tit">密码</text>
        <input id="password" type="password"
        data-type="password" 
        bindchange="handleChange" 
        placeholder="请输入密码"/>
      </view>
    </view>

js

  data: {
    username:"",
    password:""
  },
  handleChange(event) {
    // 前端收集数据
    // console.log(event.target.dataset.type)
    // console.log(event.detail)
    // 获取自定义属性值
    let type = event.target.dataset.type;
    // 获取input的文本
    let value = event.detail.value;
    // 前端表单验证
    if (value.trim()) {
      this.setData({
        [type]: value
      })
    }else{
      wx.showToast({
        title:"用户名或密码格式不正确",
        icon:'none'
      })
    }

  },  

 

3.点击登录按钮，发送请求

3.1，

 wx.switchTab(),跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.redirectTo(),关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

wx.showToast(),可以配置一个success成功的回调

 <button class="confirm-btn"  bindtap="handleLogin">登录</button>

 //用于发送登录请求的函数
   async handleLogin(){
    let {phone,password} = this.data;
    let result = await request('/login/cellphone',{
      phone,
      password
    });
    /*
    登录接口
    用户名错误->状态为400
    密码错误  ->状态为502
    登陆成功  ->状态为200
     */
    // console.log('result',result)
    if (result.code===400){
      wx.showToast({
        title: '用户名错误',
        icon:"none"
      })
    } else if (result.code === 502) {
      wx.showToast({
        title: '密码错误',
        icon: "none"
      })
    }else if(result.code===200){
      wx.showToast({
        title: '登陆成功,即将跳转',
        icon: "success",
        success() {
          wx.switchTab({
            url: '/pages/personal/personal'
          })
        }
      })
    }
  },