<div class="goods-icon"> <van-button type="info" color="#b8860b" @click="payFn" >立即购买</van-button > <van-button type="primary" color="#d81e06" @click="joinShopCar" >加入购物车</van-button > </div> </div> </template> <script> import { getGoodsDetailApi } from "@/api/details"; export default { data() { return { goodsId: " ", goodsData: [], current: 0, oldScrollTop: 0, scrollTop: 0, searchBgc: " rgba(0, 0, 0, 0.1)", show: false, opacity: 0, flag: true, timer: null, }; }, mounted() { this.handleScroll(); }, beforeDestroy() { window.removeEventListener("scroll", this.handleScrollFn); //离开当前组件别忘记移除事件监听哦 }, watch: { scrollTop: { handler: function (newValue, oldValue) { clearTimeout(this.timer); this.timer = setTimeout(() => { if (newValue == window.scrollY) { this.oldScrollTop = newValue; if (this.oldScrollTop > 100) { this.show = true; } else { this.show = false; } } else { if (this.oldScrollTop == oldValue) { // console.log("滚动开始"); } } }, 20); }, immediate: true, }, }, methods: { handleScroll() { this.handleScrollFn = () => { this.scrollTop = window.scrollY; }; window.addEventListener("scroll", this.handleScrollFn); }, // 返回上一页 onClickLeft() { this.$router.go(-1); }, // 切换商品详情页 onChange(index) { this.current = index; }, // 加入购物车 joinShopCar() { alert("加入购物车成功"); let shopcarList = JSON.parse(localStorage.getItem("shopcar")) || []; console.log(shopcarList); this.goodsData.num = 1; this.goodsData.isChecked = false; let ind = shopcarList.findIndex((ele) => { return ele.id == this.goodsId; }); console.log(ind); // 如果有相同的返回该数据的下标,没有则返回-1 if (ind != -1) { shopcarList[ind].num++; } else { shopcarList.push(this.goodsData); } localStorage.setItem("shopcar", JSON.stringify(shopcarList)); this.$router.push("/shopcar"); }, // 立即结算 payFn() { localStorage.setItem("goodspay", JSON.stringify(this.goodsData)); this.$router.push("/pay"); }, },跳转到购物车页面为什么不会高亮显示
时间: 2024-02-15 12:28:24 浏览: 14
可能是因为在跳转到购物车页面的代码中没有设置高亮显示的相关逻辑。要实现高亮显示,可以在购物车页面组件的 mounted 钩子函数中获取当前路由信息,然后根据路由信息设置高亮样式。例如可以通过 $route 对象中的 path 属性获取当前路由路径,然后通过 DOM 操作设置高亮样式。具体实现方式可以参考 Vue 官方文档中的路由导航守卫相关内容。
相关问题
<div class="map-buttons"> <button class="map-button" @click="detectConflict"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">冲突检测</span> </div> </button> <button class="map-button" @click="captureScreenshot"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">截图</span> </div> </button> <button class="map-button" @click="generateMap"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">制图</span> </div> </button> <button class="map-button" @click="zoomIn"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">放大</span> </div> </button> <button class="map-button" @click="zoomOut"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">缩小</span> </div> </button> <button class="map-button" @click="showFullMap"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">全图</span> </div> </button> </div>改写成按钮名不在按钮元素中,而在按钮正下方
<div class="map-buttons">
<button class="map-button" @click="detectConflict">冲突检测</button>
<button class="map-button" @click="captureScreenshot">截图</button>
<button class="map-button" @click="generateMap">制图</button>
<button class="map-button" @click="zoomIn">放大</button>
<button class="map-button" @click="zoomOut">缩小</button>
<button class="map-button" @click="showFullMap">全图</button>
<div class="map-button-descriptions">
<span class="map-button-description">检测是否有冲突</span>
<span class="map-button-description">捕捉屏幕截图</span>
<span class="map-button-description">生成地图</span>
<span class="map-button-description">放大地图</span>
<span class="map-button-description">缩小地图</span>
<span class="map-button-description">查看全图</span>
</div>
</div>
<div class="popup-content"> <div class="popup-row"> <div class="popup-item">5</div> <div class="popup-item">10</div> <div class="popup-item">20</div> </div> <div class="popup-row"> <div class="popup-item">50</div> <div class="popup-item">100</div> <div class="popup-item">200</div> </div> <div> <div><van-button round type="info">确认提现</van-button></div> </div> </div>点击确认提现弹出选中的div中对应的数字并示范一下
好的,以下是示例代码:
HTML 代码:
```html
<div class="popup-content">
<div class="popup-row">
<div class="popup-item" id="popup-item-1">5</div>
<div class="popup-item" id="popup-item-2">10</div>
<div class="popup-item" id="popup-item-3">20</div>
</div>
<div class="popup-row">
<div class="popup-item" id="popup-item-4">50</div>
<div class="popup-item" id="popup-item-5">100</div>
<div class="popup-item" id="popup-item-6">200</div>
</div>
<div>
<div><van-button round type="info" id="confirm-button">确认提现</van-button></div>
</div>
</div>
```
JavaScript 代码:
```javascript
// 获取确认提现按钮元素
var confirmButton = document.getElementById("confirm-button");
// 添加点击事件处理程序
confirmButton.onclick = function() {
// 获取所有选项元素
var popupItems = document.getElementsByClassName("popup-item");
// 遍历选项元素
for (var i = 0; i < popupItems.length; i++) {
// 判断当前选项元素是否被选中
if (popupItems[i].classList.contains("selected")) {
// 提取选项元素中的数字并弹出提示框
var selectedNumber = popupItems[i].innerHTML;
alert("您选中了:" + selectedNumber);
break;
}
}
}
// 获取所有选项元素
var popupItems = document.getElementsByClassName("popup-item");
// 遍历选项元素
for (var i = 0; i < popupItems.length; i++) {
// 添加点击事件处理程序
popupItems[i].onclick = function() {
// 取消所有选中状态
for (var j = 0; j < popupItems.length; j++) {
popupItems[j].classList.remove("selected");
}
// 添加选中状态
this.classList.add("selected");
}
}
```
示例代码中,我们给每个选项元素添加了一个唯一的 ID,然后在确认提现按钮的点击事件中,遍历所有选项元素,找到被选中的元素,提取其中的数字,并弹出提示框。
同时,我们也给每个选项元素添加了一个点击事件处理程序,当用户点击一个选项时,我们会取消所有选中状态,然后将当前选项设为选中状态。这样,用户就可以通过点击选项来选择要提现的金额。