애플릿 상점 개발, 2단계 분류 목록 클릭 분류 제목 전환 상품 디스플레이, 전단과 인터페이스 코드

82032 단어 애플릿 상점 분류
잔말 말고 바로 코드.
<!-- HTML --!>
<navigation id='Navigation' show-search='{{true}}'></navigation>
<view class="container">
  <view class="type-container-boxx">
  <!--    -->
    <view class="type-container">
      <view wx:for-items="{{firstclasslist}}" wx:key="id" class="type-box" bindtap="firstclassClick" id="{{item.id}}">
        <view class="type-navbar-item {{classid == item.id ? 'type-item-on' : ''}}">
          {{item.name}}
        </view>
      </view>
    </view>
    <view class="type-list">
    <!--       -->
      <view class="swiper-container">
        <swiper class="swiper_box" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
          <block wx:for="{{banners}}" wx:key="id">
            <swiper-item>
              <image bindtap="toDetailsTap" data-id="{{item.businessId}}" src="{{item.picUrl}}_m" class="slide-image" mode="widthFix" />
            </swiper-item>
          </block>
        </swiper>
        <view class="dots">
          <block wx:for="{{banners}}" wx:key="unique">
            <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
          </block>
        </view>
      </view>
      <!--      -->
      <view class="type-menu">
        <view class="type-level-box" wx:for="{{twoclasslist}}" wx:key="id">
          <view id="{{item.id}}" class="type-level-item " bindtap="levelClick" data-id="{{item.id}}">
            <image class="type-img" src="http://shop.linkeddream.com{{item.pic}}"></image>
            <text>{{item.name}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
<view hidden="{{search}}" class="search-box {{iponesc}}">
  <view hidden="{{searchidden}}" class="goods-box" wx:for-items="{{searchs}}" wx:key="index" bindtap="toDetailsTap" data-id="{{item.id}}">
    <view class="img-box">
      <image src="{{item.pic}}_m" class="image" mode="widthFix" lazy-load="true" />
      <view class="goods-characteristic">
        <text>{{item.characteristic}}</text>
      </view>
    </view>
    <view class="goods-title">{{item.name}}</view>
    <view style='display:flex;'>
      <view class="goods-price">Ұ{{item.minPrice}}</view>
      <view class="goods-price-naver">  {{item.numberOrders}}</view>
    </view>
  </view>
  <view hidden="{{nonehidden}}" class="goods-none">
    <image src="../../images/search_empty.png" />
    <text>          </text>
  </view>
</view>
<view class="top-line"></view>
<view class="bottom-lin"></view>

/**index.wxss**/

page {
  height: 100%;
  min-height: 100%;
  background-color: #fff;
}

.container {
  height: 100%;
  display: block;
}

.iphoneTop {
  line-height: 0;
}

.type-header-menu {
  height: 130rpx;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 99999;
  border-bottom: 1px solid #f5f5f5;
}

.type-header-menu .type-search {
  width: 70%;
  margin-left: 30rpx;
  position: relative;
  height: 66rpx;
  overflow: hidden;
  margin-top: 60rpx;
}

.type-header-menu .type-search image {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 14rpx;
  left: 16rpx;
}

.type-header-menu .type-search .input {
  width: 80%;
  height: 60rpx;
  background-color: #f5f5f5;
  border-radius: 50rpx;
  font-size: 28rpx;
  padding-left: 65rpx;
  display: inline-block;
  transition: all 0.6s;
}

.type-header-menu .type-search .active {
  width: 60%;
  transition: all 0.6s;
}

.type-header-menu .type-search .header-search-btn {
  float: right;
  font-size: 30rpx;
  line-height: 60rpx;
  color: #b5272d;
  margin-right: 46rpx;
}

.iphoneTop .type-header-menu {
  height: 180rpx;
}

.iphoneTop .type-search {
  margin-top: 100rpx;
}

.type-container-boxx {
  width: 100%;
  height: 90vh;
  position: fixed;
  top: 10vh;
  left: 0;
}

.iphoneTop .type-container-boxx {
  top: 12vh;
  height: 88vh;
}

.type-container {
  width: 25%;
  height: 100%;
  border-right: 1px solid #f5f5f5;
  background-color: #fff;
  display: inline-block;
  float: left;
}

.type-box:nth-child(1) {
  margin-top: 20rpx;
}

.type-box {
  padding: 5px 0;
  height: 70rpx;
  line-height: 70rpx;
}

.type-navbar-item {
  font-size: 28rpx;
  text-align: center;
  border-left: 2px solid #fff;
}

.type-item-on {
  border-left: 2px solid #ab2b2b;
  color: #ab2b2b;
  font-size: 30rpx;
}

.type-list {
  width: 74%;
  height: 100%;
  overflow: scroll;
  float: left;
}

.goods-title {
  font-size: 30rpx;
  white-space: nowrap;
}

.swiper-container {
  width: 95%;
  position: relative;
  margin: 0 auto;
  margin-top: 10px;
}

.swiper_box, .slide-image, .swiper_box {
  width: 100%;
  height: 115px;
  border-radius: 5px;
}

.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 46rpx;
  display: flex;
  justify-content: center;
}

.dots .dot {
  margin: 0 5rpx;
  width: 12rpx;
  height: 5rpx;
  background: #fff;
  border-radius: 2rpx;
  transition: all 0.6s;
  opacity: 0.5;
}

.dots .dot.active {
  width: 12rpx;
  opacity: 1;
}

.type-menu {
  margin: 0 auto;
  transition: all 0.3s;
}

.type-img {
  width: 156rpx;
  height: 156rpx;
  display: block;
  margin: 0 auto;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
}

.iphoneTop .type-img {
  width: 80%;
  display: block;
  margin: 0 auto;
  margin-bottom: 10rpx;
  border-radius: 8rpx;
}

.type-level-box {
  display: inline-block;
  text-align: center;
  margin-bottom: 10px;
  width: 33%;
}

.type-level-item {
  color: #333;
  font-size: 26rpx;
}

.type-level-item text {
  display: block;
  text-align: center;
  width: 100%;
  height: 40rpx;
  line-height: 40rpx;
}

.top-line {
  width: 100%;
  height: 1px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #f5f5f5;
  z-index: 99999;
}

.bottom-lin {
  width: 100%;
  height: 1px;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #f5f5f5;
  z-index: 99999;
}

.search-box {
  position: fixed;
  top: 130rpx;
  width: 100%;
  height: 90vh;
  background-color: #fff;
  z-index: 9999;
  overflow: scroll;
}

.iphonesearch {
  top: 180rpx;
}

.goods-box {
  width: 45%;
  margin: 20px 0 0 13px;
  display: inline-block;
}

.img-box image {
  width: 100%;
  display: block;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.img-box {
  width: 100%;
  background-color: #f5f5f5;
  margin-bottom: 5px;
  position: relative;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  overflow: hidden;
}

.goods-characteristic {
  font-size: 22rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #f0ece1;
  color: #a18d65;
  height: 35px;
  line-height: 35px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.goods-characteristic text {
  padding-left: 5px;
}

.goods-title {
  font-size: 28rpx;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
}

.goods-price {
  color: #b5272d;
  font-size: 28rpx;
  text-align: left;
  width: 100%;
  padding: 3px 4px;
}

.goods-price-naver {
  color: #999;
  font-size: 24rpx;
  line-height: 28px;
  width: 100%;
  text-align: right;
  padding: 0 3px;
}

.goods-none {
  margin-top: 25%;
}

.goods-none image {
  width: 200rpx;
  height: 200rpx;
  display: block;
  margin: 0 auto;
}

.goods-none text {
  font-size: 28rpx;
  display: block;
  color: #999;
  text-align: center;
  margin-top: 10rpx;
}


<!-- JS --!>
//index.js
var app = getApp()
Page({
  data: {
    classid:0,
    firstclasslist:[],
    twoclasslist:[],
    indicatorDots: true,
    autoplay: true,
    interval: 8000,
    duration: 800,
    swiperCurrent: 0,
    selectCurrent: 0,
    activeCategoryId: 0,
    loadingMoreHidden: true,
    search: true,
    nonehidden: true,
    searchidden: true
  },
  //      
  firstclassClick:function(e){
    console.log(e.currentTarget.id);
    this.setData({
      classid: e.currentTarget.id,
    });
    this.gettwoclassList();
  },
 //        
  levelClick: function (e) {
    wx.navigateTo({
      url: "/pages/cate-list/cate-list?id=" + e.currentTarget.dataset.id
    })
  },
  swiperchange: function (e) {
    //console.log(e.detail.current)
    this.setData({
      swiperCurrent: e.detail.current
    })
  },
  search: function(e){
    var that = this
    wx.request({
      url: app.globalData.urls + '/shop/goods/list',
      data: {
        nameLike: e.detail.value
      },
      success: function (res) {
        console.log('search',res)
        if (res.data.code == 0) {
          var searchs = [];
          for (var i = 0; i < res.data.data.length; i++) {
            searchs.push(res.data.data[i]);
          }
          that.setData({
            searchs: searchs,
            searchidden: false,
            nonehidden: true
          });
        }else{
          that.setData({
            searchidden: true,
            nonehidden: false
          });
        }
      }
    })
    
  },
  searchfocus: function(){
    this.setData({
      search: false,
      searchinput: true
    })
  },
  searchclose: function(){
    this.setData({
      search: true,
      searchinput: false
    })
  },
  onLoad: function () {
    wx.showLoading();
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        if (res.model.search('iPhone X') != -1) {
          that.setData({
            iphone: "iphoneTop",
            iponesc: "iphonesearch"
          });
        }
      }
    })
    //      
    wx.request({
      url: app.globalData.urls + '/banner/list',
      data: {
        key: 'mallName',
        type: 'goods'
      },
      success: function (res) {
        console.log('11111111111111111111111111',res)
        if (res.data.code == 0) {
          that.setData({
            banners: res.data.data
          });
        }
      }
    }),
   //             
    
    wx.request({
      url:  '      ',
      data:{
        id:that.data.classid,
      },
      type:"post",
      header:{
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      success: function (res) {
        wx.hideLoading();
        console.log('  ',res)
        that.setData({
          firstclasslist : res.data.data,
          classid:res.data.data[0].id,
        });
        that.gettwoclassList();
      }
      
    })
  },
  //               
  gettwoclassList: function () {
    var that = this;
    wx.request({
      url:  '      ',
      data:{
        id:that.data.classid,
      },
      type:"post",
      header:{
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      success: function (res) {
        console.log('  ',res)
        that.setData({
          twoclasslist : res.data.data,
        });
        
      }
    })
  },
 //             
  toDetailsTap: function (e){
    wx.navigateTo({
      url: "/pages/goods-detail/goods-detail?id=" + e.currentTarget.dataset.id
    })
    this.setData({
      search: true,
      searchinput: false
    })
  },
  onShow: function () {
    var that = this;
    wx.getStorage({
      key: 'shopCarInfo',
      success: function (res) {
        if (res.data) {
          that.data.shopCarInfo = res.data
          if (res.data.shopNum > 0) {
            wx.setTabBarBadge({
              index: 2,
              text: '' + res.data.shopNum + ''
            })
          } else {
            wx.removeTabBarBadge({
              index: 2,
            })
          }
        } else {
          wx.removeTabBarBadge({
            index: 2,
          })
        }
      }
    })
    wx.request({
      url: app.globalData.urls + '/order/statistics',
      data: { token: app.globalData.token },
      success: function (res) {
        console.log('44444444444444444444444444',res)
        if (res.data.code == 0) {
          if (res.data.data.count_id_no_pay > 0) {
            wx.setTabBarBadge({
              index: 3,
              text: '' + res.data.data.count_id_no_pay + ''
            })
          } else {
            wx.removeTabBarBadge({
              index: 3,
            })
          }
        }
      }
    })
  },

})
홀리 어레이 문제
CSS/JS로 다크/라이트 테마 스위치 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage