小程序引入其他页面

一、引入轮播图

务必要创建component模板

这是组件页面代码

<view class='banners'>
  <swiper interval="2000" autoplay="true" circular="true" duration='500' bindchange='bannerChange'>
    <block wx:for="{{banner}}" wx:key="id">
      <swiper-item class="banner-item">
        <image mode='aspectFill' src="{{item.BImgFull}}"></image>
      </swiper-item>
    </block>
  </swiper>

  <!-- 标记点 -->
  <view class='dots'>
    <block wx:for="{{banner.length}}" wx:key="index">
      <view class="dot {{index===swiperCurrent ? 'active':''}}"></view>
    </block>
  </view>
</view>

// components/banner/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    banner:{
      type:null,
      value:''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    swiperCurrent:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    bannerChange: function (e) {
      this.setData({
        swiperCurrent: e.detail.current
      })
    },
  }
})

.banners {
  position: relative;
  height: 360rpx;
}

.banners swiper, .banner-item image{
  width: 100%;
  height: 100%;
}

.dots {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  bottom: 0;
  left: 0;
}

.dot {
  margin: 20rpx 10rpx;
  width: 50rpx;
  height: 6rpx;
  background: #ddd;
  /* transition: all 0.6s; */
}

.dot.active {
  background: #8ca0ff;
}

需要引入的页面代码

    <!-- 轮播图 -->
    <banner banner="{{banner}}"></banner>

引入的JSON文件里写上

引入的JS文件里写

data:{
banner:[{
	BImgFull:"http://admin.pinliandan.joointerest.com/upload/advertpic/20190125/8313325563822490.png"
	},{
	BImgFull:"http://admin.pinliandan.joointerest.com/upload/advertpic/20190125/8313325563822490.png"
	},{
	BImgFull:"http://admin.pinliandan.joointerest.com/upload/advertpic/20190125/8313325563822490.png"
	}],
	swiperCurrent:0,
}


  bannerChange:function(e){
    this.setData({
      swiperCurrent: e.detail.current
    })
    console.log(e.detail.current)

  },

以上轮播图就可以啦！！

现在是引入搜索框啦

<view class='sraechquanbu'>
  <view class="top" bindtap='goSearch'>
    <input cursor="true" class='input'></input>
    <icon type='search' size='25rpx'></icon>
    <text class="search-text">{{searchText}}</text>
  </view>
</view>

.sraechquanbu {
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
  padding:20rpx;
}

.top {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  margin: 15rpx;
  padding: 10rpx 0;
  border-radius: 35rpx;
}

.search-text {
  width: 50%;
  font-size: 24rpx;
  opacity: 0.6;
  margin-left: 8rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.input {
  width: 0;
  height: 0;
}

// component/search/search.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
      searchText:{
        type:null,
        value:"搜索"
      }
  },

  /**
   * 组件的初始数据
   */
  data: {
  //  searchData:{
  //    type:"object"
  //  }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    goSearch:function(e){
      this.triggerEvent("gosearch",{hello:e.currentTarget.dataset.hql},{})
    }
  }
})

下面是引入的搜索组件

    <!-- 搜索栏 -->
    <search search-text="{{searchText}}"></search>

data:{
searchText: '请输入商家名、品类或者商圈还有啥玩意儿?',
}

就可以了