今天你上头条了吗

题外话

想当年某某一直上不了头条，心里那个气呀！不甘心，那就继续，结果。。。

前言

现在步入正题吧！自从跳一跳微信小程序出来了之后，小程序一下就变得很火。所以趁着这股热潮，自己也在学习小程序。一直都是以看的形式学习它，但想想这东西还是要动手。一直都喜欢看头条，就试着模仿今日头条写了一个小程序。

• 开发工具：vscode 微信开发者工具
• 开发环境：WXML(HTML),wxss(css),javascript
• 开发流程：下载微信开发者工具，注册appid就可以进行开发了。详情参考微信公众平台

接下来说说我的小程序吧!不得不说，什么事嘴上说说还是可以，要动起手来真的是有很大难度。先来看看大致效果吧！

首页scroll-view

虽然效果出来了但其中的过程也是一波三折，就说说首页里面的头部导航栏，一说到这个都会想的scroll-view来做。但是问题来了，效果出不来。不能横向滑动，我scroll-x也设置了就是没用。通过百度才查到解决方法。在这里分享给大家，避免掉坑里去。

水平滑动的scroll-view,需要给scroll-view一个固定的宽度，设置属性scroll-x,并且设置样式white-space:nowrap;（这个很重要，不设置这个样式，无法完成scroll-view的效果，我的坑也是遇在这了，三个条件缺一不可） 竖直滑动的scroll-view,需要给scroll-view一个固定的高度，设置属性scroll-y,并且设置样式white-space:nowrap;（三个条件缺一不可）

不过这里要说竖直方向上的滑动我没有设置white-space：nowrap也可以，但一定要给高度，高度！高度！高度！重要的事说三遍。如果没给高度就会出现滑动并不能让scroll-y当中的内容全部显示出来。接下来你以为就实现了吗？No！实现是不可能的，这辈子都不可能实现。接下来就会出现scroll-y里面的内容将头部导航栏给顶出去，这里的问题就是没有定位一定要position:fixed. 说说实现过程吧，首先功能上点击相应的头部导航栏里的频道就会显示相应的内容，滑动相应的内容相应的频道会显示选中与否。部分代码如下： 头部导航栏

 <scroll-view class="topbar-scroll"scroll-x="true" >
        <view class="topbar-scroll-item {{curIndex === index?'on':''}}" wx:for="{{topbar}}" 
          wx:key="{{id}}"bindtap="Selected" data-index="{{index}}">
          <view class="topbar-item-wrap">{{item.text}}</view>
        </view>
复制代码

//内容区块
<swiper class="swiper-channel-content"  duration="{{duration}}" circular="{{Circular}}" bindchange="onSwiperChange" current="{{swiperActiceIndex}}">
      <swiper-item >
        <scroll-view class="ariticles" scroll-y="true">
          <view class="ariticle-detail" wx:for="{{Recommend}}" wx:key="{{item.id}}" bindtap="toSeeNews">
            <view class="ariticle-detail-left">
              <view class="ariticle-detail-title">{{item.title}}</view>
              <view class="ariticle-detail-others">
               <text class="ariticle-detail-type">{{item.type}}</text>
               <text class="ariticle-detail-from">{{item.from}}</text>
               <text class="ariticle-detail-num">{{item.num}}</text>
              </view>
            </view> 
复制代码

通过数据绑定就可实现两者之间的同步。给遍历出的数组绑定下标index，再把下标与对应的swipe页面的绑定值同步，实现index与current相等就可实现相应的效果js如下：

Selected(e) {
    console.log(e);
  this.setData({
      curIndex:e.currentTarget.dataset.index,
      swiperActiceIndex: e.currentTarget.dataset.index
     
    })
  },
 onSwiperChange (e) {
    // console.log (e);
   let swiperActiceIndex = this.data.swiperActiceIndex;
   swiperActiceIndex = e.detail.current;
   let  curIndex = this.data.curIndex;
   curIndex = swiperActiceIndex;
   this.setData({
     swiperActiceIndex,
     curIndex
   })
  },
复制代码

频道添加

添加频道实现的过程是利用数组的填加与删除，我的频道栏的数组和首页头部导航栏都是遍历同一个数组，这样添加或删除数组元素就能使两者统一。关键还是埋值，说到这里不得不说由于自己埋的数据过多，出现了好多bug,捋了半天才把它们捋顺，难受的一匹。不过实现了这个功能心里还是挺开心的。附上代码：

<view class="addchannel" hidden="{{hidden}}">
        <view class="back" bindtap="returnIndex"><image src="/images/icon_back.png"></image></view>
        <scroll-view class="channel-scroll"scroll-y="true" scrollTop="{{scrollTop}}"  >
          <view class="channel-description">我的频道 <text>选中不放可以拖拽顺序</text></view>
          <view class="channel-choose" wx:for="{{topbar}}" wx:key="{{index}}" data-index="{{index}}"  bindtap="minusChannelTitle" ><text>{{item.text}}</text></view>
          <view class="otherchannel-add">
            <view class="channel-description other">其他频道 <text>点击添加频道</text></view>
            <view class="channel-choose" wx:for="{{addchannel}}" wx:key="{{id}}" data-item="{{index}}"  bindtap="addChannelTitle" >
              <text>+{{item.text}}</text>
            </view>
          </view>
        </scroll-view>
      </view>
复制代码

js代码：

//添加频道
addChannelTitle(e) {
    console.log(e);
    let addchannel = this.data.addchannel;
    let topbar = this.data.topbar;
    var item = e.currentTarget.dataset.item; //获取数组addchannel下标
    console.log(item);
    // 用户点击确定执行
    wx.showModal({
      title: '提示',
      content: '是否添加此频道',
      success: (res) => {
        if (res.confirm) {
        topbar.push((addchannel.splice(item,1))[0]); //删除被选中数组addchannel的元素并添加至topbar数组中
          this.setData({
            topbar,
            addchannel
          }) 
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },
复制代码

删除频道与添加频道雷同这里就不附上代码了，有兴趣可以去我的github上看看。

评论功能

有新闻详情页，就必然少不了评论功能。毕竟现在的人说话又好听，不看看评论是真的让人难受，只有评论才能激起我看新闻的激情。来看看效果。

评论功能是通过获取表单里面的输入内容，调用全局里的 globalData.userInfo获取用户头像和昵称，将他们push进数组里在输出。这里我要说的是统计评论数量，并在页面中显示出来。这个过程要在页面加载就完成，所以这里的js要写在onLoad函数内。这里附上代码：

  onLoad: function (options) {
     let  TotalNum = this.data.TotalNum;
     let  comment = this.data.comment;
     TotalNum = comment.length;
     this.setData({
       TotalNum
     }
复制代码

整体效果

最后

这个小程序觉得用组件做会更好，逻辑层次会更清，代码更简洁，也会减少工作量。奈何作为菜鸟的我，刚开始没有意识到这样的问题，导致工作量增加了不少。这个小程序还有很多功能未实现，不过后续我会持续更新。如果喜欢的话可以关注我的github 期待你的star和fork。 第一次在社区发文章，可能很多地方表达不清，希望您给新手多一些鼓励，点一个赞，给我一些动力。同时也欢迎您的建议或看法。

转载于:https://juejin.im/post/5b1fe9e1f265da6e3562dd69