美文网首页
微信小程序 批量取消收藏 可类似 购物车的 批量删除

微信小程序 批量取消收藏 可类似 购物车的 批量删除

作者: 郭的妻 | 来源:发表于2019-02-28 13:11 被阅读1次

    wxss

      .header {
        width: 100%;
        padding: 0rpx 24rpx;
        height: 80rpx;
        color: #333;
        font-size: 30rpx;
      }
      /* 取消收藏 */
      .bottom{
        width: 100%;
        height: 100rpx;
        background-color: #fff;
        position: fixed;
        left: 0rpx;
        bottom: 0rpx;
      }
      .bottom .right {
        width:220rpx;
        height:60rpx;
        line-height:60rpx;
        background-color:#027EE7;
        color:#fff;
        font-size:26rpx;
        border-radius:10rpx;
        margin:0 auto;
        text-align:center;
      }
      /*列表*/
      .hotel_list{
        width: 100%;
        background-color: #ffff;
        border-bottom: 2rpx solid #f1f1f1;
      }
      .hotel_list .list_cons{
        width:100%;
      }
      .hotel_list .icon_none{
        width: 30rpx;
        height: 30rpx;
        border: 1rpx solid #d6d6d6;
        border-radius: 50%;
        margin-right: 14rpx;
      }
      .flex_center{
        padding:24rpx;
      }
      .flex_between{
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        width:100%;
      }
      .flex_start{
        display: flex;
        display: -webkit-flex;
        justify-content: flex-start;
        align-items: center;
      }
      .flex_end{
        display: flex;
        display: -webkit-flex;
        justify-content: flex-end;
        align-items: center;
        margin:0 auto;
      }
    
      /* 左边图片内容 */
      .kecheng_left{
        width:36%;
        height:170rpx;
        float:left;
      }
      .kecheng_left image{
        width:100%;
        height: 100%;
        border-radius:6rpx;
      }
    
      /* 右边文字内容 */
      .kecheng_right{
        width:56%;
        height: 170rpx;
        float:left;
        padding:9rpx 0rpx;
        margin-left:4%;
      }
      .mingcheng{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        height:30rpx;
        line-height:30rpx;
        font-size:30rpx;
        color: #333333;
      }
      .comments{
        width:100%;
        font-size:26rpx;
        height:30rpx;
        line-height:30rpx;
        color:#999999;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        margin-top: 12rpx;
      }
      .money{
        width:100%;
        font-size:28rpx;
        color:#f21a31;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        height:30rpx;
        line-height:30rpx;
        margin-top: 12rpx;
      }
    
    
      /* 门店收藏 */
      .swiper-tab{
        width: 100%;
        border-bottom: 2rpx solid #F3F4F6; 
        text-align: center;
        height: 100rpx;
        line-height: 100rpx;
      }
      .swiper-tab-item{
        display: inline-block;
        width: 50%;
        font-size: 28rpx;
        color:#333333;
      }
      .active{
        color:#0D82E8 !important;
        border-bottom:3rpx solid #0D82E8;
        height:93rpx;
        line-height:94rpx;
      }
      .style{
        display: none;
      }
      .block{
        display: block;
      }
    

    wxml

      <view class='header flex_end'>
          <view class='flex_center' bindtap='bianjie'>
            {{bianjie}}
          </view>
      </view>
    
      <!-- 对应的内容 -->
    
      <view class='hotel_list flex_center' wx:for="{{items}}" wx:key="items" wx:for-item="i" >
        <view class='list_cons flex_start'>
          <!-- 左边选择删除按钮 -->
          <checkbox-group class="style {{checkbox==true?' block':'style'}}" style="margin-left:-1%;" data-index="{{index}}" bindtap='management'>
              <checkbox checked='{{i.checked}}'></checkbox>
          </checkbox-group>
          <!-- 左边图片内容 -->
          <view style="width:100%;" data-id="{{index}}"  bindtap='select'>
            <view class="kecheng_left">
              <image src="{{i.url}}"></image>
            </view>
            <view class='right kecheng_right'>
              <view class="mingcheng">
                {{i.techer_name}}
              </view>
              <view class="comments">
                {{i.pinglun}} / {{i.zan}} / {{i.yishou}}
              </view>
              <view class="money">{{i.kejjie}}</view>
            </view>
          </view>
        </view>
      </view>
    
    
      <!-- 选择删除 -->
      <view class='bottom {{checkbox==true?" block ":"style"}}'>
        <view class='right' bindtap='deleteitem'>
          取消收藏
        </view>
      </view>
    

    相关文章

      网友评论

          本文标题:微信小程序 批量取消收藏 可类似 购物车的 批量删除

          本文链接:https://www.haomeiwen.com/subject/fewxdqtx.html