微信小程序——轮播图、组件传值、下拉刷新、导航 实战开发
文章目录
- 一、常用组件
- 1.首页轮播图数据的请求以及渲染
- 1.1 轮播图数据的请求 pages/home/home.js
- 2 使用组件 - 视图容器 - swiper
- 二、自定义组件 - 产品列表
- 1.自定义组件的布局
- 2.自定义组件的样式
- 3.首页请求数据,并且传递给子组件
- 4.子组件接收数据
- 5.子组件渲染数据
- 三、实现下拉刷新上拉加载
- 1.开启首页的下拉刷新功能
- 2.完善相关的下拉刷新函数
- 四、返回顶部功能实现
- 五、实现点击商品列表进入产品的详情页面
- 1.构建详情页面
- 2.声明式导航跳转
- 3.详情页面接收数据并且渲染数据
- 4.编程式导航渲染
一、常用组件
在此处请求轮播图的数据。
1.首页轮播图数据的请求以及渲染
1.1 轮播图数据的请求 pages/home/home.js
import { request } from './../../utils/index.js'
Page({
/**
* 页面的初始数据
*/
data: {
bannerlist: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
request('/api/pro/banner').then(data => {
console.log(data)
// 微信小程序修改数据的方式
this.setData({
bannerlist: data.data
})
})
},
})
2 使用组件 - 视图容器 - swiper
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。 属性表如下
属性 |
类型 |
默认值 |
必填 |
说明 |
最低版本 |
---|---|---|---|---|---|
indicator-dots |
boolean |
false |
否 |
是否显示面板指示点 |
1.0.0 |
indicator-color |
color |
rgba(0, 0, 0, .3) |
否 |
指示点颜色 |
1.1.0 |
indicator-active-color |
color |
#000000 |
否 |
当前选中的指示点颜色 |
1.1.0 |
autoplay |
boolean |
false |
否 |
是否自动切换 |
1.0.0 |
current |
number |
0 |
否 |
当前所在滑块的 index |
1.0.0 |
interval |
number |
5000 |
否 |
自动切换时间间隔 |
1.0.0 |
duration |
number |
500 |
否 |
滑动动画时长 |
1.0.0 |
circular |
boolean |
false |
否 |
是否采用衔接滑动 |
1.0.0 |
vertical |
boolean |
false |
否 |
滑动方向是否为纵向 |
1.0.0 |
previous-margin |
string |
"0px" |
否 |
前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 |
1.9.0 |
next-margin |
string |
"0px" |
否 |
后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 |
1.9.0 |
display-multiple-items |
number |
1 |
否 |
同时显示的滑块数量 |
1.9.0 |
skip-hidden-item-layout |
boolean |
false |
否 |
是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 |
1.9.0 |
easing-function |
string |
"default" |
否 |
指定 swiper 切换缓动动画类型 |
2.6.5 |
bindchange |
eventhandle |
否 |
current 改变时会触发 change 事件,event.detail = {current, source} |
1.0.0 |
|
bindtransition |
eventhandle |
否 |
swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy} |
2.4.3 |
|
bindanimationfinish |
eventhandle |
否 |
动画结束时会触发 animationfinish 事件,event.detail 同上 |
1.9.0 |
在pages/home/home.wxml文件中输入如下代码查看效果
<!--pages/home/home.wxml-->
<swiper
indicator-dots="{{true}}" autoplay="{{true}}" circular="{{true}}"
duration="{{500}}">
<block wx:for="{{bannerlist}}" wx:key="index">
<swiper-item >
<image src="{{'http://daxun.kuboy.top' + item}}"></image>
</swiper-item>
</block>
</swiper>
<prolist></prolist>
二、自定义组件 - 产品列表
1.自定义组件的布局
components/prolist/prolist.wxml
<view class="prolist">
<view class="proitem">
<view class="itemimg">
<image class="img" src=""></image>
</view>
<view class="iteminfo">
<view class="title">
产品名称
</view>
<view class="price">
¥199
</view>
</view>
</view>
</view>
2.自定义组件的样式
components/prolist/prolist.wxss
/* components/prolist/prolist.wxss */
.prolist .proitem{
width: 100%;
display: flex;
height: 100px;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
}
.prolist .proitem .itemimg{
width: 100px;
height: 100px;
padding: 5px;
}
.prolist .proitem .itemimg .img{
width: 90px;
height: 90px;
box-sizing: border-box;
border: 1px solid #ccc;
}
.prolist .proitem .iteminfo {
padding: 3px;
}
.prolist .proitem .iteminfo .title{
font-size: 18px;
font-weight: bold;
}
.prolist .proitem .iteminfo .price{
font-size: 12px;
}
3.首页请求数据,并且传递给子组件
pages/home/home.js
import { request } from './../../utils/index.js'
Page({
/**
* 页面的初始数据
*/
data: {
prolist: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
request('/api/pro').then(data => {
console.log(data)
// 微信小程序修改数据的方式
this.setData({
prolist: data.data
})
})
},
})
pages/home/home.wxml
<prolist prolist="{{prolist}}"></prolist>
4.子组件接收数据
components/prolist/prolist.js
Component({
/**
* 组件的属性列表
*/
properties: {
prolist: Array
},
})
5.子组件渲染数据
components/prolist/prolist.wxml
<view class="prolist">
<view class="proitem" wx:for="{{prolist}}" wx:key="item.proid">
<view class="itemimg">
<image class="img" src="{{item.proimg}}"></image>
</view>
<view class="iteminfo">
<view class="title">
{{item.proname}}
</view>
<view class="price">
¥{{item.price}}
</view>
</view>
</view>
</view>
三、实现下拉刷新上拉加载
1.开启首页的下拉刷新功能
pages/home/home.json
{
"usingComponents": {
"prolist": "/components/prolist/prolist"
},
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark"
}
2.完善相关的下拉刷新函数
pages/home/home.js
// pages/home/home.js
import { request } from './../../utils/index.js'
Page({
/**
* 页面的初始数据
*/
data: {
bannerlist: [],
prolist: [],
pageCode: 1 // 页码
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
request('/api/pro/banner').then(data => {
console.log(data)
this.setData({
bannerlist: data.data
})
})
request('/api/pro').then(data => {
console.log(data)
this.setData({
prolist: data.data
})
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
request('/api/pro').then(data => {
console.log(data)
this.setData({
prolist: data.data,
pageCode: 1
})
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
let num = this.data.pageCode;
let prolist = this.data.prolist
num++;
console.log(num)
request('/api/pro', {
pageCode: num
}).then(data => {
// 此处注意临界值的变化 -- 没有数据
this.setData({
prolist: [...prolist, ...data.data],
pageCode: num
})
})
}
})
上拉下拉测试即可
四、返回顶部功能实现
在首页中设置一个固定定位的按钮,然后绑定点击事件,绑定事件使用 bindtap,然后调用小程序提供的api即可返回
// pages/home/home.wxml
<view class="backtop" bindtap="backtop"> ↑ </view>
// pages/home/home.wxss
.backtop {
position: fixed;
bottom: 10px;
right: 8px;
border-radius: 50%;
width: 30px;
height: 30px;
background-color: rgba(0, 0, 0, 0.5);
font-size: 18px;
text-align: center;
line-height: 30px;
}
// pages/home/home.js
Page({
/**
* 自定义函数
*/
backtop: function () {
// 小程序api 的界面 - 滚动
wx.pageScrollTo({
scrollTop: 0,
duration: 300
})
}
})
五、实现点击商品列表进入产品的详情页面
1.构建详情页面
app.json
"pages": [
"pages/detail/detail"
],
2.声明式导航跳转
使用小程序 组件-导航-navigator
页面链接。
属性 |
类型 |
默认值 |
必填 |
说明 |
最低版本 |
---|---|---|---|---|---|
target |
string |
self |
否 |
在哪个目标上发生跳转,默认当前小程序 |
2.0.7 |
url |
string |
否 |
当前小程序内的跳转链接 |
1.0.0 |
|
open-type |
string |
navigate |
否 |
跳转方式 |
1.0.0 |
delta |
number |
1 |
否 |
当 open-type 为 'navigateBack' 时有效,表示回退的层数 |
1.0.0 |
app-id |
string |
否 |
当target="miniProgram"时有效,要打开的小程序 appId |
2.0.7 |
|
path |
string |
否 |
当target="miniProgram"时有效,打开的页面路径,如果为空则打开首页 |
2.0.7 |
|
extra-data |
object |
否 |
当target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch(),App.onShow() 中获取到这份数据。详情 |
2.0.7 |
|
version |
string |
release |
否 |
当target="miniProgram"时有效,要打开的小程序版本 |
2.0.7 |
hover-class |
string |
navigator-hover |
否 |
指定点击时的样式类,当hover-class="none"时,没有点击态效果 |
1.0.0 |
hover-stop-propagation |
boolean |
false |
否 |
指定是否阻止本节点的祖先节点出现点击态 |
1.5.0 |
hover-start-time |
number |
50 |
否 |
按住后多久出现点击态,单位毫秒 |
1.0.0 |
hover-stay-time |
number |
600 |
否 |
手指松开后点击态保留时间,单位毫秒 |
1.0.0 |
bindsuccess |
string |
否 |
当target="miniProgram"时有效,跳转小程序成功 |
2.0.7 |
|
bindfail |
string |
否 |
当target="miniProgram"时有效,跳转小程序失败 |
2.0.7 |
|
bindcomplete |
string |
否 |
当target="miniProgram"时有效,跳转小程序完成 |
2.0.7 |
open-type 的合法值 – 在编程式导航中详细讲解
值 |
说明 |
最低版本 |
---|---|---|
navigate |
对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 |
|
redirect |
对应 wx.redirectTo 的功能 |
|
switchTab |
对应 wx.switchTab 的功能 |
|
reLaunch |
对应 wx.reLaunch 的功能 |
1.1.0 |
navigateBack |
对应 wx.navigateBack 的功能 |
1.1.0 |
exit |
退出小程序,target="miniProgram"时生效 |
2.1.0 |
// components/prolist/prolist.wxml
<view class="prolist">
<navigator url="{{'/pages/detail/detail?proid=' + item.proid}}" wx:for="{{prolist}}" wx:key="item.proid">
<view class="proitem" >
<view class="itemimg">
<image class="img" src="{{item.proimg}}"></image>
</view>
<view class="iteminfo">
<view class="title">
{{item.proname}}
</view>
<view class="price">
¥{{item.price}}
</view>
</view>
</view>
</navigator>
</view>
3.详情页面接收数据并且渲染数据
// pages/detail/detail.js
import { request } from './../../utils/index.js';
Page({
/**
* 页面的初始数据
*/
data: {
proid: '',
proname: '',
proimg: ''
price: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// options为接收的参数
const { proid } = options
request('/api/pro/detail?proid=' + proid).then(data => {
console.log(data.data)
const { proid, proname, price, proimg} = data.data
this.setData({
proid, proname, price, proimg
})
})
}
})
// pages/detail/detail.wxml
<image src="{{proimg}}" style="width: 100px;height: 100px;"></image>
<view>{{proname}}</view>
<view>¥{{price}}</view>
点击不同的产品测试即可
4.编程式导航渲染
使用小程序提供的api实现编程式路由的跳转
wx.switchTab(Object object)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.reLaunch(Object object)
关闭所有页面,打开到应用内的某个页面
wx.redirectTo(Object object)
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.navigateTo(Object object)
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
wx.navigateBack(Object object)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层
小程序传递数据使用 data-params形式,可以在事件中根据event获取该参数
// components/prolist/prolist.wxml
<view class="prolist">
<view class="proitem" bindtap="toDetail" data-proid="{{item.proid}}" wx:for="{{prolist}}" wx:key="item.proid">
<view class="itemimg">
<image class="img" src="{{item.proimg}}"></image>
</view>
<view class="iteminfo">
<view class="title">
{{item.proname}}
</view>
<view class="price">
¥{{item.price}}
</view>
</view>
</view>
</view>
// components/prolist/prolist.js
Component({
/**
* 组件的属性列表
*/
properties: {
prolist: Array
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
toDetail (event) {
const { proid } = event.currentTarget.dataset
wx.navigateTo({
url: '/pages/detail/detail?proid=' + proid
})
}
}
})
- 修改prototype使Event支持observe任何对象
- 两个小例子带你看懂什么是比特币分叉和2018必将大热的IFO
- 用c#添加Networkservice对文件夹的写权限
- 游标清除重复数据
- 研究人员警示智能音箱等物联网设备存在较多安全问题
- Tootip小程序,整理一下自己用
- 滴滴电单车--“街兔” 无奈相关域名已被注册
- 联发科将推出两款芯片,拥有AI和人脸识别技术,能和高通叫板吗?
- 谷歌AI黑科技曝光:合成语音与真人声音难以区分
- 小程序是什么?有什么用?
- Aibee融资1.65亿元 曾16.8万元秒下aibee.cn
- 小程序审核攻略
- js checkbox.checked=true在document.body.appendChild(checkbox)前与后赋值
- 吹得飞起的人工智能,2017都摔过哪些跟头?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 聊聊dubbo-go的failsafeCluster
- 【HDFS】distcp报错Check0sum mismatch
- ffmpeg转换多媒体文件,真香
- 静态库与动态库的那些事
- 云服务器网络延迟与丢包问题定位(mtr工具)
- Spark UDF1 输入复杂结构
- Qt音视频开发6-ffmpeg解码处理
- MySQL 百万级数据量分页查询方法及其优化
- 教你设计一个超牛逼的本地缓存!
- Flutter延时任务、Flutter通过Future与Timer实现延时任务
- DDIA 笔记
- 工作流和状态机
- CentOS 6.x 搭建:Headless Chrome + ChromeDriver + Selenium的爬虫环境系统
- 聊聊dubbo-go的registryAwareCluster
- 同样是空值,null和undefined有什么异同?