New Features

What feature(s) did you add?

• Add top navigator menu to select trending ,created ,hot ,promoted posts

• Add showing the created posts,hot posts,promoted posts

• Add scroll down to refresh and scroll to bottom to load more posts

• Add showing loading sign

  

  ---

  

  ​

---

How did you implement it/them?

• Create a scroll view header

  <scroll-view class="header__container" scroll-x="true" >
          <block wx:for="{{categoryTabs}}" wx:key="lanmu_id" wx:if="1">
              <view 
                  class="header__item {{item == postsSelect ? 'active':'' }}" 
                  bindtap="changeCategory" 
                  data-id="{{ item }}"
              >
                  {{ item }}
              </view>
          </block>
        </scroll-view>

.header__container{
    width: 18rem;
    height: 64rpx;
    white-space: nowrap;
}
.header__item{
    padding: 14rpx;
    display: inline-block;
}

• Scroll to the bottom to load more posts

  onReachBottom:function(e){
      console.log("refresh");
      this.setData({ loading:false});
      var category = this.data.postsSelect;
      switch (category) {
        case "流行": this.loadMoreTrending(); break;
        case "最新": this.loadMoreCreated(); break;
        case "热门": this.loadMoreHot(); break;
        case "推广": this.loadMorePromoted(); break;
      }
    },
  

• Scroll to top to refresh posts

    onPullDownRefresh: function () {
      var category = this.data.postsSelect;
      wx.showNavigationBarLoading();
      switch(category){
        case "流行": this.getTrendingPosts();break;
        case "最新": this.getCreatedPosts(); break;
        case "热门": this.getHotPosts(); break;
        case "推广": this.getPromotedPosts(); break;
      }
      
      wx.stopPullDownRefresh() ;
      
    },
  

• Load more posts

   loadMoreTrending(){
      var lastAuthor = this.data.trendingPosts[this.data.trendingPosts.length-1].author;
      var lastPermlink = this.data.trendingPosts[this.data.trendingPosts.length - 1].permlink;
      console.log(lastAuthor);
      var that = this;
      var posts = [];
      var i=0;
      var url = 'https://api.steemjs.com/get_discussions_by_trending?query={"limit":"10","tag":"","start_author":"' + lastAuthor + '","start_permlink":"' + lastPermlink + '"}';
      console.log(url);
      wx.request({
        url: url,
        method: 'GET',
        success: function (res) {
          console.log(res.data)
          var data = res.data;
          for (var post in data) {
            if(i == 0){
              i++;
              continue;
            }
            var obj = new Object();
            var images = [];
            obj.author = data[post].author;
            obj.avatar = "https://steemitimages.com/u/" + obj.author + "/avatar/small";
            obj.permlink = data[post].permlink;
            obj.category = data[post].category;
            obj.title = that.filterBody(data[post].title);
            obj.body = that.filterBody(data[post].body);
            obj.json_metadata = data[post].json_metadata;
            images = JSON.parse(obj.json_metadata).image;
            obj.image = that.getImage(images);
            if (!obj.image) {
              obj.image = 'https://steemitimages.com/640x480/' + JSON.parse(obj.json_metadata).thumbnail;
            }
            obj.time = that.getTime(data[post].created);
            obj.like_num = data[post].net_votes;
            obj.comment_num = data[post].children;
            obj.pending_payout_value = "$" + data[post].pending_payout_value.replace("SBD", "");
            obj.reputation = that.getReputation(data[post].author_reputation);
            posts.push(obj);
          }
          console.log(posts);
          that.setData({
            postsData: that.data.trendingPosts.concat(posts),
            trendingPosts: that.data.trendingPosts.concat(posts),
            loading: true
          })
          wx.hideNavigationBarLoading();
        }
      })
  
    },
  

• Add loading sign and some init data

    <loading hidden="{{loading}}">
    Loading...
    </loading>
  

    data:{
      loading:false ,
      trendingPosts:[],
      createdPosts:[],
      promotedPosts:[],
      hotPosts:[],
      postsData:[],
      categoryTabs: ['流行','最新','热门','推广'],
      scrollTop:0,
      postsSelect :'流行',
      scrollTop:0
    },
  

  ​

---

Roadmap

• Show account feed
• Create a menu for clicking to the different pages
• Add more function like transfer,chat and so on.

---

How to contribute?

Github: https://github.com/Cha0s0000/MicroSteemit

• Fork it!
• Create your feature branch: git checkout -b my-new-feature
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin my-new-feature
• Submit a pull request.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---