轮播图和自定义组件

轮播图

1.index.wxml

<!-- 轮播图 -->

<navigation-bar title="2020583590"></navigation-bar>

<swiper indicator-dots autoplay circular  indicator-color="#fff"  indicator-active-color="#000">

<swiper-item wx:for="{{swiperList}}" data-index="{{index}}" bindtap="tap">

<image style="width: 100%;" mode="aspectFill" src="{{item}}"></image>

</swiper-item>

</swiper>

<!-- scroll-view布局 -->

<scroll-view class="outer" scroll-x>

<view wx:for="{{scrollList}}" class="inner {{nowPage==index?'active':''}}" data-index="{{index}}" bindtap="scrollTap">

{{item}}

</view>

</scroll-view>

2.index.js

Page({

  data: {

    swiperList: [

      '/images/1.jpg',

      '/images/2.jpg',

      '/images/3.jpg'],

      scrollList:[

        '推荐',

        '发现',

        '关注',

        '购物车',

        '我的淘宝',

      ],

      nowPage:0,

  },

  tap(e){

    console.log(e.currentTarget.dataset.index)

    wx.navigateTo({

      url: '/pages/detail/detail?id='+e.currentTarget.dataset.index,

      })

  },

  scrollTap(e){

    let index=e.currentTarget.dataset.index;

    this.setData({

      nowPage:index

    })

  },

3.index.wxss

.inner{

  display: inline-block;

  width: 25%;

  text-align: center;

}

.outer{

  white-space: nowrap;

}

.active{

  border-bottom: 2rpx red solid;

}

4.index.json

{

  "usingComponents": {

    "navigation-bar":"../../components/navigation-bar/navigation-bar"

}

}

自定义组件

先创一个components文件夹，然后再创一个文件夹与自定义组件同名（选Component文件），

自定义组件tabs

1.tabs.wxml

<view class="tabs">

  <view class="tabsitem {{sindex==index?'active':''}}" bindtap="bindtap" data-index="{{index}}" wx:for="{{array}}">{{item}}</view>

</view>

2.tabs.js

// components/tabs/tabs.js

Component({

  properties: {

    array:{

      type:Array,

      value:[]

    }

  },

  data: {

    sindex:0

  },

  methods: {

    bindtap(e){

      let sindex = e.currentTarget.dataset.index

      this.setData({

        sindex})

      this.triggerEvent('myevent',sindex)

    }

  }

})

3.tabs.wxss

.tabs{

  display: flex;

}

.tabsitem{

  flex: 1;

  text-align: center;

  height: 60rpx;

  line-height: 60rpx;

}

.active{

  color: red;

  border-bottom: 2rpx solid red;

}

4.在json文件中写路径goodlist.json

{

  "usingComponents": {

    "search":"/components/search/search",

    "tabs":"/components/tabs/tabs"

  }

}

5.在wxml中引用

<search class="search"></search>

<tabs array="{{arr}}" bindmyevent="onMyEvent" class="tabs"></tabs>

<view class="goodsContent">

    <navigator class="goods_item" wx:for="{{goods}}">

      <view class="left">

        <image src="{{item.goods_small_logo?item.goods_small_logo:'http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg'}}" mode="widthFix"></image>

      </view>

      <view class="right">

        <view class="goods_name">{{item.goods_name}}</view>

        <view class="goods_price">￥{{item.goods_price}}</view>

      </view>

    </navigator>

</view>

6.goodlist.js

Page({

  data: {

    arr:["综合","销量","价格"],

    goods:[]

  },

  onLoad(options) {

    this.getgoodslist(0)

  },

  onMyEvent(e){

    console.log(e)

    let index = e.detail

    this.getgoodslist(index)

  },

  // 价格： https://api-hmugo-web.itheima.net/api/public/v1/goods/searchpagesize=20pagenum=3

  getgoodslist(num){

    let that = this

    wx.request({

      url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',

      data:{

        pagesize:20,

        pagenum:num+1

      },

      success(res){

        console.log(res)

        that.setData({

          goods:res.data.message.goods

        })

      }

    })

  }

})

7.gooodlist.wxss

.page{

  padding-top: 110rpx;

}

.search{

  position: fixed;

  width: 100%;

  left: 0;

  top: 0;

  z-index: 999;

}

.tabs{

  background-color: #fff;

  position: fixed;

  left: 0;

  top: 100rpx;

  width: 100%;

  z-index: 999;

}

.goodsContent{

  height: calc(100vh - 110rpx);

}

.goods_item{

  display: flex;

}

.left{

  flex: 1;

  display: flex;

  justify-content: center;

  align-items: center;

}

.right{

  flex: 2;

  display: flex;

  flex-direction: column;

  justify-content: space-evenly;

}

.left image{

  width: 60%;

}

.goods_name{

  font-size: 30rpx;

  text-overflow: ellipsis;

  display: -webkit-box;

  overflow: hidden;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

}

.goods_price{

  font-size: 30rpx;

  color: red;

}

自定义组件seaech

1.search.wxml

<view class="search">

  <navigator url="/pages/searchInfo/searchInfo">

    <icon type="search" size="40rpx"></icon>

    <text>搜索</text>

  </navigator>

</view>

2.search.wxss

.search{

  height: 100rpx;

  background-color: red;

  display: flex;

  justify-content: center;

  align-items: center;

}

.search navigator{

  height: 70rpx;

  width: 97%;

  display: flex;

  background-color: #fff;

  justify-content: center;

  align-items: center;

  border-radius: 13rpx;

}

.search navigator text{

  color: rgb(160, 158, 158);

}

结果图