学习周记 Week14

学习周记 Week14

• 1.学习目标
• 2.学习内容
• • 2.1 界面跳转
  • 2.2 view组件添加
  • 2.3 轮播图
  • 2.4 布局
  • 2.5 搜索框

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文件

<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;
}

运行结果：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！