学习周记 Week14

1.学习目标

微信小程序初步开发

2.学习内容

2.1 界面跳转

navigateTo：将原来的页面保存在页面栈中，在跳入到下一个页面的时候目标页面也进栈，只有在这个情况下点击手机的返回按钮才可以跳转到上一个页面

wx.navigateTo({
  url: 'test?id=1'//实际路径要写全
})

注：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式

2.2 view组件添加

 <view class="volume" id="ipad">
    <image class="ui-width-100" src="../../img/ipadpro.jpg" bindtap="volumeClick"></image>
     <text>急寻ipad pro一台 悬赏五十</text>
  </view>

运行结果：

2.3 轮播图

使用swiper组件

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>

2.4 布局

.wxlm文件

<!--pages/draft/draft.wxml-->
<import src='../../template/rent_template.wxml' />

<template is='empty_draft'></template>

.wxss文件

/* pages/draft/draft.wxss */
.draft_box{
  width: 100%;
  text-align: center;
}

.draft_pic{
  width: 130rpx;
  height: 130rpx;
}

运行结果：

2.5 搜索框

.wxml文件

<view>
     <view>
        <view class="weui-search-bar">
            <view class="weui-search-bar__form">
            <!-- 搜索框 -->
                <view class="weui-search-bar__box">
                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <input type="text" class="weui-search-bar__input" placeholder="请输入搜索内容"/>
                </view>
            </view>
            <!-- 搜索按钮,调用搜索查询方法 -->
            <view class="weui-search-bar__cancel-btn" bindtap='方法名a'>搜索</view>
        </view>
    </view>
</view>

.wxss文件

.weui-search-bar {
  position: relative;
  padding: 8px 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  background-color: #EFEFF4;
  border-top: 1rpx solid #D7D6DC;
  border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search_in-box {
  position: absolute;
  left: 10px;
  top: 7px;
}
.weui-search-bar__form {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
          flex: auto;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}
.weui-search-bar__input {
  height: 28px;
  line-height: 28px;
  font-size: 14px;
}
.weui-search-bar__cancel-btn {
  margin-left: 10px;
  line-height: 28px;
  color: #09BB07;
  white-space: nowrap;
}

运行结果：