欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序?qū)崿F(xiàn)滑動(dòng)塊效果

 更新時(shí)間：2021年04月21日 11:04:30   作者：Daniel·M·water  
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)滑動(dòng)塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)滑動(dòng)塊效果的具體代碼，供大家參考，具體內(nèi)容如下

當(dāng)你在復(fù)制的時(shí)候 一定要 把js 邏輯的 list 數(shù)據(jù)更改就行了

小程序的css樣式

.box {
    width: 100vw;
    background: #F2F2F2;
    transition: all 3s;
}

.box-b {
    height: 8vh;
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: #FAFAFA;
    align-items: center;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.box-r1 {
    font-size: 24rpx;
    color: red;
}

.box-r2 {
    font-size: 28rpx;
    padding: 20rpx 50rpx;
    border-radius: 50rpx;
    color: #fff;
    background-color: #FF6C3B;
}

.box-t {
    height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 25rpx;
}

.box-top {
    width: 90vw;
    height: 22vw;
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.boxs {
    width: 105vw;
    height: 20vw;
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.boxs-1 {
    width: 100vw;
    height: 20vw;
    background: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 10rpx 0;
    border-radius: 10px;
    margin-left: 20px;
}

.boxs-1 > view:first-child {
    width: 10vw;
    line-height: 18vw;
    text-align: center;
    /* background: #ccc; */
    height: 20vw;
}

.boxs-1 > view:nth-child(2) {
    width: 20vw;
    /* background: #ccc; */
    height: 100%;
    border-radius: 20rpx;
}

image {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
}

.boxs-1 > view:last-child {
    width: 60vw;
    /* background: #ccc; */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.boxs-1 > view:last-child>view{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: relative;
    left: 30rpx;
}
text {
    width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boxs-2 {
    width: 120rpx;
    height: 170rpx;
    text-align: center;
    line-height: 170rpx;
    background: #e64340;
    font-size: 24rpx;
    color: #fff;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.red_cart{
    color: red;
    position: relative;
    right: 40px;
}

小程序的wxml樣式

<view class="box">
    <view class="box-t">
        <movable-area class="box-top" wx:for="{{list}}" wx:key="index">
            <movable-view class="boxs"
                          direction="horizontal"
                          animation="{{true}}"
                          inertia="true"
                          out-of-bounds="false"
            >
                <view class="boxs-1">
                    <view>
                        <checkbox checked="{{selected}}" wx:key="index" bindtap="chec" data-selected="{{item}}"></checkbox>
                    </view>
                    <view>
                        <image src="{{item.pic}}"></image>
                    </view>
                    <view class="cart_list">
                        <text>{{item.name}}</text>
                        <view>
                            <view class="red_cart">￥{{item.price}}</view>
                            <view>
                                <van-stepper class="cart_vant"
                                        value="{{ item.number }}"
                                        bind:change="onChange" data-key="{{item.key}}"/>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="boxs-2" bindtap="del" data-key="{{item.key}}">刪除</view>
            </movable-view>
        </movable-area>
    </view>
    <view class="box-b">
        <view class="box-r1">合計(jì):￥{{price}}</view>
        <view class="box-r2">去結(jié)算</view>
    </view>
</view>

小程序js

// pages/sales/sales.js
let {
    getShop,
    getRemove,
    modifyNumber,
    getSelected
} = require('../../http/api')
Page({
    onShareAppMessage() {
        return {
            title: 'movable-view',
            path: 'page/component/pages/movable-view/movable-view'
        }
    },

    data: {
        x: 0,
        scale: 2,
        list: [],//可以現(xiàn)在 list定義數(shù)據(jù) 測(cè)試使用
        price: 0,
        selected: []
    },
    del(e) {
        console.log(e.currentTarget.dataset.key)
        var keys = e.currentTarget.dataset.key
        var token = wx.getStorageSync('token')
        getRemove(token, keys).then(res => {
            // console.log(res)
        })
        this.getShop()
    },
    onChange(e) {
        console.log(e.currentTarget.dataset.key)
        console.log(e.detail)
        var token = wx.getStorageSync('token')
        var key = e.currentTarget.dataset.key
        var number = e.detail
        modifyNumber(token, key, number).then(res => {
            // console.log(res)
        })
        this.getShop()
    },
    tap() {
        this.setData({
            x: 0,
        })
    },
    getShop() {
        getShop().then(res => {
            this.setData({
                list: res.items
            })
        })
    },
    chec(e) {
        this.getShop()
    },
    onLoad: function (options) {
        getShop().then(res => {
            this.setData({
                list: res.items
            })
            this.data.list.forEach(i => {
                var token = wx.getStorageSync('token')
                var key = i.key
                var selected = i.selected
                this.setData({
                    selected: selected
                })
                getSelected(token, key, selected).then(res => {
                    this.setData({
                        price: res.data.price
                    })
                })
            })


        })

    },
    onShow: function () {
        this.getShop()
        if (wx.getStorageSync('token')) {
            wx.hideLoading()
        } else {
            wx.showLoading({
                title: '請(qǐng)登錄',
            })
        }
    },


    /**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
     */
    onUnload: function () {

    },


    onReady: function () {

    },
    /**
     * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 頁(yè)面上拉觸底事件的處理函數(shù)
     */
    onReachBottom: function () {

    },

    /**
     * 用戶(hù)點(diǎn)擊右上角分享
     */
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 理解JavaScript設(shè)計(jì)模式中的建造者模式

    理解JavaScript設(shè)計(jì)模式中的建造者模式

    這篇文章主要介紹了理解JavaScript設(shè)計(jì)模式中的建造者模式,文章基于JavaScript的相關(guān)資料展開(kāi)箱子內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
    2022-04-04
  • javascript replace方法與正則表達(dá)式

    javascript replace方法與正則表達(dá)式

    replace方法的語(yǔ)法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正則表達(dá)式對(duì)象(RegExp)也可以是字符串(string)，replaceText是替代查找到的字符串。。為了幫助大家更好的理解，下面舉個(gè)簡(jiǎn)單例子說(shuō)明一下
    2008-02-02
  • JavaScript 撐出頁(yè)面文字換行

    JavaScript 撐出頁(yè)面文字換行

    最近在做Web 頁(yè)面，雖然不是很喜歡，不過(guò)既然公司安排了，就好好做吧，還是學(xué)了不少東西。
    2009-06-06
  • javascript的tab切換原理與效果實(shí)現(xiàn)方法

    javascript的tab切換原理與效果實(shí)現(xiàn)方法

    這篇文章主要介紹了javascript的tab切換原理與效果實(shí)現(xiàn)方法,實(shí)例分析了簡(jiǎn)單的tab切換實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-01-01

    • 最新評(píng)論