<template> <el-card> <el-row :gutter=”20″ class=”header”> <el-col :span=”7″> <el-input placeholder=”Please enter the product name…” clearable v-model=”queryForm.query”></el-input> </el-col> <el-button type=”primary” :icon=”Search” @click=”initProductList”>Search</el-button> <el-button type=”primary” @click=”handleDialogValue()”>Add product</el-button> </el-row> <el-table :data=”tableData” stripe style=”width: 100%”> <el-table-column prop=”name” label=”Product Name” width=”200″ fixed/> <el-table-column prop=”image” label=”Product image” width=”150″ align=”center”> <template v-slot=”scope”> <img :src=”getServerUrl() + ‘/image/product/’ + scope.row.proPic” width=”80″ height=”80″/> </template> </el-table-column> <el-table-column […]
Tag: swipe
uniapp left swipe list to delete
Directory Effect index.vue delSlideLeft.vue delRightIconfont.css refer to plug-in at last Effect index.vue Use page Introduce the encapsulated page delSlideLeft.vue <template> <view class=””> <view v-for=”(item, index) in busOrderList” :key=”index” :data-index=”index”> <delSlideLeft :item=”item” :data_transit=”{ index: index, item: item }” @delItem=”delItem”> <view class=”editItem”>List display content</view> </delSlideLeft> </view> </view> </template> <script> //Introduce the encapsulated page import delSlideLeft from “@/components/delSlideLeft.vue”; […]
Use swiper to display multiple items at a time, arranged vertically, with multiple rows and columns
<view class=”markList”> <view class=”list”> <swiper class=”swiper1″ :indicator-dots=”indicatorDots”> <swiper-item v-for=”(item,index) in pbgoodlist” :key=”index” class=”swiperitem”> <view class=”tittle”>Hot Recruitment Blank Cities</view> <view class=”item”> <span v-for=”(item1,index1) in item.list” :class=”index1 <=2 ? ‘red’ : ”” :key=”index1″>{<!– –>{< !– –>index1 + 1}}.{<!– –>{<!– –>item1}}</span> </view> </swiper-item> </swiper> </view> </view> .markList {<!– –> margin: 45upx 30upx; .list {<!– –> background: #fff; border-radius: […]
Swiper 10.2.0 basic use, Vue3
Swiper 10.2.0 Basic User Manual Installation method 1. Install using npm npm install swiper –save 2. Use cdn <script src=”//i2.wp.com/cdn.jsdelivr.net/npm/swiper@10/swiper-element-bundle.min.js”></script> 2. How to use 2.1. Use in Vue <script setup> import { register } from ‘swiper/element/bundle’ register() //Register the swiper component. If the installation method uses cdn, this step is not required, and the above […]
Vue3 list vertical scrolling (including page turning effect using swiper)
1. Use element-plus table for scrolling: Needs that can be met: The table scrolls vertically line by line, similar to a revolving lantern. Unsatisfied needs: The table is paginated and scrolls vertically, which has the effect of turning pages. Code: <template> <el-table :data=”tableData” :show-overflow-tooltip=”true” class=”alarmTable” > <el-table-column type=”index” width=”134″ align=”center” label=”serial number”> <template #default=”scope”> <span […]
uni-app custom swiper component
uni-app custom navigation bar uni-app custom navigation bar steps uni-app custom navigation bar example uni-app custom system navigation bar uni-app custom navigation bar uni-app custom navigation bar steps In uni-app, you can customize the navigation bar effect by modifying the navigation bar configuration of the page. Here are the general steps for implementing a custom […]
Super easy-to-use carousel plugin vue-awesome-swiper@3, two-way control to realize custom pager and front and rear indicators. Solve the problem of confusion when dynamically obtaining data.
Super easy-to-use carousel plugin vue-awesome-swiper@3, two-way control to realize custom pager and front and rear indicators. Solve the bug of confusion and instability when dynamically obtaining data 1. Requirements, demo renderings 1. Requirement description 2. Demo renderings 2. vue-awesome-swiper 1. Official website address and component installation 2. Detailed explanation of ideas 3. Demo code 1.html […]
Combine shopify liquid with swiper and swiper animation library to realize a carousel
theme.js adds common video components // js/custom-element/ui/native-video.js var NativeVideo = class extends HTMLElement { constructor() { super(); this. hasLoaded = false; if (this. autoPlay) { this. play(); } else { this.addEventListener(“click”, this.play.bind(this), { once: true }); } } get autoPlay() { return this. hasAttribute(“autoplay”); } play() { if (!this. hasLoaded) { this._replaceContent(); } this.querySelector(“video”).play(); } […]
Swiper custom paging click to jump to the specified page
Swiper custom page click to jump to the specified page mySwiper.slideTo(index, speed, runCallbacks), control Swiper to switch to the specified slide. Parameter name Type Required Description index num Required Specify the index of the slide to be switched to speed num Optional Switch speed (unit ms) runCallbacks boolean Optional When set to false, the transition […]
Vue3 customizes a simple Swiper sliding component – touchpad sliding & mouse sliding & left and right arrow sliding – demo
The code implements a basic sliding function, and monitors sliding operations through mouse press, mouse release and mouse move events. The specific implementation logic is as follows: In the onMounted hook function, we add three event listeners to the scroll container: mousedown event: when the mouse is pressed, set control.isDown to true, and record the […]