本文介绍了如何在微信小程序中统一和单独设置页面标题，以及通过JS动态更改。同时，详细讲解了如何实现底部操作条的定制，包括点击事件、数据绑定和导航高亮。此外，还展示了购物车页面的商品列表、数量增减及全选功能的实现方法。
微信小程序
修改标题
- 对于全部都固定的标题，在app.json统一设置，会在各个页面都一样
"navigationBarTitleText": "微信接口功能演示"
- 对于单独页面的固定标题，可以在各自的json文件中设置
"navigationBarTitleText": "微信接口功能演示"
- 通过js进行动态设置
函数{
wx.setNavigationBarTitle({
title: '当前页面'
})
}
可以通过上个页面跳转带过来的参数；
可以通过当前页面请求过来的数据设置也可以；
colorUI底部操作条
- 在colorUI中找到自己想要的底部操作条
- 添加名为foot 的class，让导航条处于页面底部
<view class="cu-bar bg-white tabbar border shop foot">
- 给每个导航加上bindtap点击事件和自定义属性data-xxx
<view class="action text-green" bindtap="changeNav" data-nav="homePage">
关于自定义属性的设置和获取：标签里使用data-属性名="属性值"进行设置，使用e.currentTarget.dataset.属性名进行获取。
-
index.js中写上对应方法
-
点击之后导航高亮
-
完善底部操作条
购物车
wxml
<view>
<view class="product-list" style="height:{{height}}px;">
<view class="product-item" wx:for="{{slideProductList}}" wx:for-index="index" wx:key='slideProductList'>
<slide-delete pid="{{item.id}}" bindaction="handleSlideDelete" wx:key='slideProductList'>
<view class="product-item-wrap">
<icon type="{{item.select}}" size="19" data-index="{{index}}" data-select="{{item.select}}" bindtap="change" color="#673424" />
<view class="product_img">
<image src="{{item.url}}" class='goods-img' mode="widthFix"></image>
</view>
<view class="product-movable-item">
<view class="goods-name">{{item.name}}</view>
<view class="goods-type">最新款
<text>{{item.style}}</text>
</view>
<view class="goods-price">￥{{item.price}}</view>
</view>
<view class="product-movable-item product-movable-item-amount">
<view class="num-box">
<view class="btn-groups">
<button class="goods-btn btn-minus" data-index="{{index}}" data-num="{{item.num}}" bindtap="subtraction">—</button>
<input class='num' type='number' data-index="{{index}}" bindblur="numIputBlur" bindinput='inputNum' value='{{item.num}}'></input>
<button class="goods-btn btn-add" data-index="{{index}}" data-num="{{item.num}}" bindtap="addtion">+</button>
</view>
</view>
</view>
</view>
</slide-delete>
</view>
</view>
</view>
<view class="footer">
<view class="cart-fixbar">
<view class="allSelect">
<icon type="{{allSelect}}" size="19" data-select="{{allSelect}}" bindtap="allSelect" color='#fff' />
<view class="allSelect-text">全选</view>
</view>
<view class="count">
<text>合计：</text>￥{{count}}
</view>
<view class="order">
<view class="orders">
去结算
<text class="allnum">({{num}})</text>
</view>
</view>
</view>
</view>
wxss
/* pages/shoppingcar/shoppingcar.wxss */
.cart-box .item {
display: flex;
flex-direction: row;
align-items: center;
padding: 20rpx;
border-top: 8rpx solid #f0f3fa;
}
.cart-box .item .goods-info {
margin-left: 20rpx;
}
.goods-img {
width: 160rpx;
margin-left: 20rpx;
height: 160rpx;
}
.cart-box .row {
color: #fff;
display: flex;
flex-direction: row;
width: 430rpx;
justify-content: space-between;
margin-bottom: 10rpx;
}
.goods-name {
font-size: 32rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #333;
padding-bottom: 10rpx;
width: 290rpx;
}
.goods-price {
font-size: 32rpx;
color: #673424;
position: relative;
top: 14rpx;
}
.goods-type {
color: #999;
font-size: 24rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 240rpx;
padding-bottom: 10rpx;
}
.num-box {
display: flex;
flex-direction: row;
justify-content: flex-end;
position: relative;
top: 6rpx;
}
.goods-btn {
width: 44rpx;
height: 44rpx;
padding: 0;
line-height: 40rpx;
font-weight: 400;
color: #fff;
margin: 0;
background: #673424;
border-radius: 50%;
}
.num {
color: #999;
width: 50rpx;
margin-left: 5rpx;
margin-right: 5rpx;
text-align: center;
line-height: 50rpx;
font-size: 30rpx;
}
.btn-add {
font-size: 36rpx;
}
.btn-minus {
font-size: 18rpx;
background: #ad8579;
}
.btn-groups {
display: flex;
flex-direction: row;
justify-content: flex-end;
background: #f4f4f4;
padding: 2rpx;
border-radius: 10rpx;
}
.cart-fixbar {
position: fixed;
background: #673424;
height: 106rpx;
width: 95%;
margin: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
.cart-box .item:last-child {
border-bottom: 8rpx solid #f0f3fa;
}
.cart-fixbar .allSelect {
display: flex;
flex-direction: row;
height: 106rpx;
align-items: center;
color: #fff;
font-size: 32rpx;
margin-left: 20rpx;
}
.cart-fixbar .allSelect-text {
margin-left: 16rpx;
font-size: 28rpx;
}
.cart-fixbar .count {
color: #fff;
font-size: 36rpx;
position: absolute;
right: 220rpx;
display: flex;
align-items: center;
}
.cart-fixbar .count text {
font-size: 28rpx;
}
.cart-fixbar .order {
color: #673424;
height: 58rpx;
background: #fff;
line-height: 58rpx;
position: absolute;
right: 0;
margin: 0 20rpx;
font-size: 28rpx;
border-radius: 10rpx;
}
.cart-fixbar .orders {
padding: 0 18rpx;
}
.cart-fixbar .allnum {
font-size: 28rpx;
}
.row_boxs {
display: flex;
align-items: center;
}
.goods-type {
flex: 1;
}
.goods-type text {
padding-right: 10rpx;
}
.section {
padding-bottom: 220rpx;
}
.footer {
border-top: 1rpx solid #eee;
position: fixed;
bottom: 0rpx;
width: 100%;
display: flex;
background: #fff;
font-size: 24rpx;
height: 55px;
align-items: center;
}
/* .footer .ft_item {
width: 25%;
text-align: center;
}
.footer .ft_item image {
width: 44rpx;
height: 44rpx;
margin-top: 10rpx;
}
.footer .ft_item:nth-child(3) .item_title {
color: #673424;
} */
.section_img {
width: 110rpx;
height: 110rpx;
}
.section_boxs {
text-align: center;
margin: 50% auto 0;
}
.cart-box_p,
.section_p {
text-align: center;
font-size: 26rpx;
padding-top: 10rpx;
color: #999;
}
.cart-box_p {
padding-top: 60rpx;
}
.cart-box_p text {
border: 1rpx solid #eee;
padding: 10rpx 24rpx;
letter-spacing: 1rpx;
}
.title {
margin: 60rpx 0 30rpx;
font-size: 40rpx;
text-align: center;
font-weight: bold;
color: #383a3d;
}
.product-list .product-item {
position: relative;
width: 100vw;
border-bottom: 10rpx solid #f0f3fa;
box-sizing: border-box;
background: #fff;
z-index: 999;
}
.slide-product-list .slide-product-item {
position: relative;
width: 100vw;
border-bottom: 2rpx solid #e9e9e9;
box-sizing: border-box;
background: #fff;
z-index: 999;
}
.product-list .product-item movable-area {
height: 120rpx;
width: calc(100vw - 120rpx);
}
.product-list .product-item movable-view {
height: 120rpx;
width: 100vw;
background: #fff;
z-index: 999;
}
.product-list .product-item:first-child {
border-top: 10rpx solid #f0f3fa;
}
.product-list .product-item .delete-btn {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 120rpx;
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #fff;
line-height: 120rpx;
z-index: 1;
background: #775246;
text-align: center;
}
.product-list .product-item-wrap {
position: relative;
display: flex;
align-items: center;
padding: 8rpx 0 20rpx 20rpx;
box-sizing: border-box;
}
.product-list .product-item-wrap .product-movable-item {
flex: 1;
/* overflow:hidden;*/
}
.product-list .product-item-wrap .product-movable-item-name {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #71747a;
line-height: 60rpx;
margin-right: 10rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.product-list .product-item-wrap .product-movable-item-code {
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #969aa3;
}
.product-list .product-item-wrap .product-movable-item-amount {
flex: 1;
padding-right: 50rpx;
position: relative;
}
.product-list .product-item-wrap .product-movable-item-amount .amount {
width: 120rpx;
font-size: 28rpx;
color: #383a3d;
line-height: 60rpx;
}
.product-list .product-item-wrap .product-movable-item-amount .unit {
position: absolute;
top: 0;
right: 30rpx;
font-size: 28rpx;
color: #969aa3;
line-height: 60rpx;
}
.product_img {
display: flex;
align-items: center;
padding-right: 20rpx;
}
.product-list {
display: block;
overflow-y: auto;
}
js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
goodsNum:'',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
slideProductList: [
{
id:1,
name: '土鲫鱼',
url: "../../image/bracelet.jpg",
style: "2代",
price: "149.5",
select: "circle",
num: "1",
code: "0001",
amount: 500
},
{
id: 2,
name: "指环支架",
url: "../../image/ring.jpg",
style: "金色",
price: "19.9",
select: "circle",
code: "0002",
num: "1",
amount: 500
},
{
id: 3,
name: "新款平板电脑",
url: "../../image/iphone.png",
style: "9.7英寸",
price: "100",
select: "circle",
code: "0003",
num: "1",
amount: 110
},
{
id: 4,
code: "0001",
name: "无人机",
url: "../../image/uav.jpg",
style: "低配版",
price: "4999",
select: "circle",
code: "0004",
num: "1",
amount: 200
},
{
id: 5,
code: "0001",
name: "无人机",
url: "../../image/uav.jpg",
style: "低配版",
price: "4999",
select: "circle",
code: "0004",
num: "1",
amount: 200
},
{
id: 6,
code: "0001",
name: "无人机",
url: "../../image/uav.jpg",
style: "低配版",
price: "4999",
select: "circle",
code: "0004",
num: "1",
amount: 200
},
],
allSelect: "circle",
num: 0,
count: 0,
lastX: 0,
lastY: 0,
text: "没有滑动",
},
change: function (e) {
var that = this
var index = e.currentTarget.dataset.index
var select = e.currentTarget.dataset.select
if (select == "circle") {
var stype = "success"
} else {
var stype = "circle"
}
var newList = that.data.slideProductList
newList[index].select = stype
that.setData({
slideProductList: newList
})
that.countNum()
that.count()
},
addtion: function (e) {
var that = this
var index = e.currentTarget.dataset.index
var num = e.currentTarget.dataset.num
//默认99件
if (num < 99) {
num++
}
var newList = that.data.slideProductList
newList[index].num = num
that.setData({
goodsNum:num,
slideProductList: newList
})
that.countNum()
that.count()
},
inputNum:function(e){
var num = e.detail.value;
this.setData({
goodsNum:num
})
},
numIputBlur:function(e){
var that = this
var num = that.data.goodsNum
var index = e.currentTarget.dataset.index
var newList = that.data.slideProductList
if (num == "") { //盘空
newList[index].num = 1;
that.setData({
slideProductList: newList
})
}else if (num < 1) {
that.setData({
goodsNum: newList[index].num,
slideProductList: newList
})
wx.showToast({
title: '亲，该宝贝不能减少了哦~',
icon: 'none'
})
}else if(num>99){
that.setData({
goodsNum: newList[index].num,
slideProductList: newList
})
wx.showToast({
title: '亲，该宝贝最多购买99菜品哦~',
icon: 'none'
})
}else{
newList[index].num = num;
that.setData({
slideProductList: newList
})
}
that.countNum()
that.count()
},
//减法
subtraction: function (e) {
var that = this
var index = e.currentTarget.dataset.index
var num = e.currentTarget.dataset.num
var newList = that.data.slideProductList
if (num == 1) {//当数量为1件时，再次点击移除该商品
newList.splice(index, 1)
} else {
num--
newList[index].num = num
}
that.setData({
goodsNum: num,
slideProductList: newList
})
that.countNum()
that.count()
},
//全选
allSelect: function (e) {
var that = this
var allSelect = e.currentTarget.dataset.select //先判断是否选中
var newList = that.data.slideProductList
console.log(newList)
if (allSelect == "circle") {
for (var i = 0; i < newList.length; i++) {
newList[i].select = "success"
}
var select = "success"
} else {
for (var i = 0; i < newList.length; i++) {
newList[i].select = "circle"
}
var select = "circle"
}
that.setData({
slideProductList: newList,
allSelect: select
})
that.countNum()
that.count()
},
countNum: function () { //计算数量
var that = this
var newList = that.data.slideProductList
var allNum = 0
for (var i = 0; i < newList.length; i++) {
if (newList[i].select == "success") {
allNum += parseInt(newList[i].num)
}
}
parseInt
that.setData({
num: allNum
})
},
count: function () {//计算金额方法
var that = this
var newList = that.data.slideProductList
var newCount = 0
for (var i = 0; i < newList.length; i++) {
if (newList[i].select == "success") {
newCount += newList[i].num * newList[i].price
}
}
that.setData({
count: newCount
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var width=wx.getSystemInfoSync().windowWidth
var height=wx.getSystemInfoSync().windowHeight
height=height-53;
this.setData({
height:height
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
扫一扫
1560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
