事件绑定
scroll-view
必须要写高度与滚动方向
样式设置
三个view改为一行
1.利用浮动-----float：left
2.或者给父标签一个display：flex； 有间隙的话利用justify-conent：space-around
3.左右盒子布局–>右边的文字垂直分散
4.分类布局
<view class="navlist" >
<view v-for="(item,i) in navList" :key="i">
<image :src="item.image_src" ></image>
</view>
</view>
.navlist{
display: flex;
justify-content: space-around;
margin: 15px 0;
image{
width: 128rpx;
height: 140rpx;
}
}
<view class="rightbig">
<view class="right" v-for="(item,i2) in item.product_list" :key="i2" >
<image :src="item.image_src" :style="{width:item.image_width + 'rpx'}" mode="widthFix" v-if="i2!==0"></image>
</view>
</view>
css
.big{
display: flex;
}
.rightbig{
display: flex;
// 如果一行放不下怎么放wrap：换行，第一行在上方。
flex-wrap: wrap;
// 相邻项目的间隔相等
justify-content: space-around;
}
.right{
padding-left: 10rpx;
}
分类布局终极
.cate-lv3-title{
display: flex;
// 盛不下就自动换行
flex-wrap: wrap;
.cate-lv3-item{
width: 33.33%;
display: flex;
// 改为纵向布局
flex-direction: column;
// 纵向居中
justify-content: center;
// 横向居中
align-items: center;
margin-bottom: 10px;
image{
// 图片固定大小的话用px
width: 50px;
height: 50px;
}
text{
font-size: 12px;
}
}
}
5.让盒子里面的内容垂直水平居中
display: flex;
// 水平居中
justify-content: center;
// 垂直居中
align-items: center;
搜索框组件
<template>
<view>
<view class="my-search-container">
<view class="my-search-box">
<uni-icons type="search" size="17"></uni-icons>
<text class="placeholder">搜索</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.my-search-container{
height:50px;
background-color: #C00000;
// 让里面的内容纵向横向垂直居中
display: flex;
//实现垂直居中
align-items: center;
padding: 0 10px;
.my-search-box{
height: 36px;
background-color: #FFFFFF;
// 圆角边
border-radius: 18px;
width: 100%;
display: flex;
// 水平居中
justify-content: center;
// 垂直居中
align-items: center;
// 让里面的内容横向居中 纵向居中
.placeholder{
font-size: 15px;
}
}
}
</style>
block与view
block相当于vue中的template不占用位置（减少了不必要的渲染元素）
wx:if与hidden
1.运行方式不同
wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
hidden 以切换样式的方式（ display: none/block; ），控制元素的显示与隐藏
2.使用建议
频繁切换时，建议使用 hidden
控制条件复杂时，建议使用 wx:if 搭配 wx:elif 、 wx:else 进行展示与隐藏的切换
target与currentTarget
拼接
导航传参
1.声明式导航传参
2.导航到非tabBar页面
3.后退导航
4.导航到tabBar页面
列表处理
一. 上拉列表事件
上拉触底加载列表
1.配置上拉触底的距离
.json==>"onReachBottomDistance":200(没单位)
2. 监听onReachBottom事件(-页面上拉触底事件的处理函数)
.js===>onReachBottom:function(){ console.log('ok') }
此时页码+1
.js===>onReachBottom:function(){ this.setData({ page:this.data.page+1 }) //此时调用加载数据的函数 this.getShopList() }
loading的展示与停止
1.请求之前展示loading效果
wx.showLoading({ title:'数据加载中' })
2.请求结束之后隐藏loading效果
complete:()=>{ wx.hideLoading() }
节流阀
1.首先在data里定义一个loading
2.当发送请求的时候打开节流阀---->让其它请求停止
this.setData({
loading:true
})
3.当请求成功的时候将节流阀关闭
this.setData({
loading:false
})
4.在上拉触底函数中判断节流阀是否开，开的话直接return出去
if(this.data.loading) return
二.列表优化
判断是否还有下一页数据
在下拉函数中判断 // 如果数据加载完 直接return出去 if(this.data.page*this.data.pageSize>=this.data.total){ return wx.showToast({ title: '数据加载完成', // 去掉图标 icon:'none' }) }
下拉刷新
.json-->"enablePullDownRefresh":true 改变下拉刷新背景颜色 “backgroundColor”:"#efefef" 设置三个小圆点的样式 “backgroundTextStyle”:"dark"
小优化关闭下拉刷新
写到了请求里面 只要发起请求必然关闭下拉刷新
但是不止是在这别的地方也有
只有下拉刷新才有必要调用
调用方法期间传入回调函数cb
只要外界传cb就调用
看有没有cb 有的话调用cb回调函数
cb&&cb（） 下拉刷新调用函数
在下拉刷新发起请求中传入回调 this.getShopList（（）=>{
wx,stopPullDownRefresh()}）
手机号码的处理
写一个脚本（记得暴露出去）—>再在用到的页面引用–>最后再使用
function splitPhoto (str){
// 判断是不是手机号
if(str.length!==11) return str
// 进行分割 分割成字符的数组
var arr=str.split('')
arr.splice(3,0,'-')//在索引为3的位置进行分割 不删除任何元素 加入一个-
arr.splice(8,0,'-')
// 最后转化为字符串
return arr.join('')
}
// 导出脚本
module.exports={
splitPhoto:splitPhoto
}
<!--pages/shopList/shopList.wxml-->
<view wx:for="{{shopList}}" wx:key="id" class="box1">
<view class="box2"> <image src="{{item.images[0]}}"></image></view>
<view class="box3">
<text class="text1">{{item.name}}</text>
//使用的位置
<text>电话：{{m1.splitPhoto(item.phone)}}</text>
<text>地址：{{item.address}}</text>
<text>营业时间：{{item.businessHours}}</text>
</view>
</view>
//在wxs中写上位置 然后再加上module
<wxs src="../../utils/tools.wxs" module="m1"></wxs>
总结
列表的相关代码
js代码
// pages/shopList/shopList.js
Page({
/**
* 页面的初始数据
*/
data: {
shopList:[],
query:{},
page:1,
pageSize:10,
total:10,
loading:false
},
getshopList(cb){
// 发起请求节流阀
// 表示正在发起请求 其余请求都关闭
this.setData({
loading:true
})
// 请求数据前打开loading
wx.showLoading({
title: '数据加载中',
})
wx.request({
url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
method:'GET',
data:{
_page:this.data.page,
_limit:this.data.pageSize
},
success:(res)=>{
// console.log(res.data,'11111');
this.setData({
shopList: [...this.data.shopList, ...res.data],
// 转成数字
total: res.header['X-Total-Count'] - 0
})
},
// 请求结束后隐藏loading
complete:()=>{
wx.hideLoading()
// 请求成功 节流阀关闭 让其他请求开始
this.setData({
loading:false
})
// 停止下拉刷新 写这里不合适 因为其余的地方也有这个请求
// wx.stopPullDownRefresh()
cb&&cb()
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// onload进行数据转存
console.log(options);
this.setData({
query:options
}),
this.getshopList()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
wx.setNavigationBarTitle({
title: this.data.query.name,
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
// 重置数据
this.setData({
page:1,
shopList:[],
total:0
}),
// 继续发起请求
this.getshopList(()=>{
wx.stopPullDownRefresh()
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
// 如果数据加载完 直接return出去
if(this.data.page*this.data.pageSize>=this.data.total){
return wx.showToast({
title: '数据加载完成',
// 去掉图标
icon:'none'
})
}
// 触底的时候判断请求是否结束
// 如果节流阀打开的话说明请求没有结束 那么数据就不会让加 直接return出去
if(this.data.loading) return
console.log('OK');
this.setData({
page:this.data.page+1
}),
this.getshopList()
},
})
wxs代码
function splitPhoto (str){
// 判断是不是手机号
if(str.length!==11) return str
// 进行分割 分割成字符的数组
var arr=str.split('')
arr.splice(3,0,'-')//在索引为3的位置进行分割 不删除任何元素 加入一个-
arr.splice(8,0,'-')
// 最后转化为字符串
return arr.join('')
}
// 导出脚本
module.exports={
splitPhoto:splitPhoto
}
.json代码
{
"usingComponents": {},
"onReachBottomDistance":200,
"enablePullDownRefresh":true,
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark"
}
wxml代码
<!--pages/shopList/shopList.wxml-->
<view wx:for="{{shopList}}" wx:key="id" class="box1">
<view class="box2"> <image src="{{item.images[0]}}"></image></view>
<view class="box3">
<text class="text1">{{item.name}}</text>
<text>电话：{{m1.splitPhoto(item.phone)}}</text>
<text>地址：{{item.address}}</text>
<text>营业时间：{{item.businessHours}}</text>
</view>
</view>
<wxs src="../../utils/tools.wxs" module="m1"></wxs>
伪元素定位
一个伪元素都有一个前伪元素和一个后伪元素。先给一个内容。再给一个块盒子。宽高给出来，子绝父相。
// 每个元素都有伪元素 都有一个前一个后
&::before{
content: '';
display: block;
width: 3px;
height: 30px;
background-color: #808080;
position: absolute;
top: 50%;
left: 0;
// 自己的百分之五十
transform: translateY(-50%);
}
}
7082
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
