小程序 앱만들기 - 9 - 4 : 홈화면 수정 - 마치며

유튜브 강좌 : youtu.be/nj_lxIDKXNw

github : https://github.com/semotube/korTourInfo

semotube/korTourInfo

 

refresh기능 추가

index.json : "enablePullDownRefresh": true 추가

index.js : onPullDownRefresh() 추가 및 reload기능 추가

{
  "usingComponents": {},
  "enablePullDownRefresh": true
}

  onLoad: function () {
    this.loadData();
  },

  onPullDownRefresh: function(){
    wx.stopPullDownRefresh();
    this.loadData();
  },

  loadData() {
    let toDay = util.getToday();
    this.searchFestival("P", toDay, 10);//이미지 있는 조회순(인기순)
    this.searchFestival("C", toDay, 6);//수정일순(최신순)
    this.searchStay("C", toDay, 6);//수정일순(최신순)
  },

이미지 처리부분 수정

이미지 없을시 이미지없음을 표시

<!-- New Festival -->
.
.

    <view class="bg-pink padding-xs radius text-center shadow-blur">
      <image wx:if="{{item.firstimage2}}" src="{{item.firstimage2}}" mode="aspectFit" style="height:300rpx"></image>
      <image wx:else src="/resources/images/noImage.png" mode="aspectFit" style="height:300rpx"></image>
      <view class="text-cut margin-top-sm text-Abc">{{item.title}}</view>
    </view>
    
.
.
.

<!-- New Stay -->
.
.

    <view class="bg-pink padding-xs radius text-center shadow-blur">
      <image wx:if="{{item.firstimage2}}" src="{{item.firstimage2}}" mode="aspectFit" style="height:300rpx"></image>
      <image wx:else src="/resources/images/noImage.png" mode="aspectFit" style="height:300rpx"></image>
      <view class="text-cut margin-top-sm text-Abc">{{item.title}}</view>
    </view>
 

 

이미지클릭시 상세정보로 이동

//bind Detail
////////////////////////////////////////////////////////////////////////////
  bindDetail(e) {
    let item = app.globalData.detailItem = e.currentTarget.dataset.item;
    wx.navigateTo({
      url: '../search/detail/detail?contentid='+item.contentid+'&contenttypeid='+item.contenttypeid,
    })
  },

<!-- Hot Festival swiper -->
.
.
<swiper-item wx:for="{{festivalList_Hot}}" wx:key="*this" bindtap="bindDetail" data-item="{{item}}">
.
.

<!-- New Festival -->
.
.
<view class="cu-item" wx:for="{{festivalList_New}}" wx:key="*this" bindtap="bindDetail" data-item="{{item}}">
.
.

<!-- New Stay -->
.
.
<view class="cu-item" wx:for="{{stayList_New}}" wx:key="*this" bindtap="bindDetail" data-item="{{item}}">

 

마치며...

소스는 github에 올려놓겠습니다.

https://github.com/semotube/study

semotube/study