小程式資料列表上下滑的內部加左右滑

阿新 • • 發佈：2018-12-15

在這裡插入圖片描述如圖，左邊是固定的，右邊內容是可以左右滑動的，上面和下面部分也是固定的，整個可以上下滑動。 wxml:

<view class="top">
  <view class='topLeft'></view>
  <scroll-view class='topBox' scroll-x scroll-with-animation scroll-left='{{left}}' bindscroll="scrolling" bindtouchstart='scrollTouchStart' data-scroll='1'>
    <block wx:for='{{groupArr}}' wx:key>
      <view class='topRight'>{{item.company}}</view>
    </block>
  </scroll-view>
</view>
<view class="type">
  <view class="label">品質：</view>
  <block wx:for='{{typeArr}}' wx:key>
    <view class="item {{index==0?'marginLeft':''}} {{activeIndex==index?'cur':''}}" bindtap='chooseType' data-index='{{index}}'>{{item}}</view>
  </block>
</view>
<view class="wrapper">
  <view class="main">
    <view class="left">
      <block wx:for='{{lists}}' wx:key>
        <view class="line1 {{index==lists.length-1?'bottomBorder':''}}">
          <text class='border'>{{item.name}}</text>
        </view>
      </block>
    </view>
    <scroll-view scroll-x class="right" bindscroll="scrolling" scroll-with-animation scroll-left='{{left}}' bindtouchstart='scrollTouchStart' data-scroll='2'>
      <!-- <view class="right-wrapper"> -->
      <block wx:for='{{lists}}' wx:key>
        <view class="line2 {{index==lists.length-1?'bottomBorder':''}}">
          <block wx:for='{{item.priceArr}}' wx:key wx:for-item='price' wx:for-index='index2'>
            <view class='price'>
              {{price}}
              <!-- 最低價的樣式 -->
              <image src='/img/ 
[email protected]' class='minPrice' wx:if='{{item.minIndex==index2}}'></image>
              <!-- 建議讓ui切圖的時候直接帶上文字，前端加上的話，第一不好固定位置，第二增加太多頁面節點，資料量大的時候就會延長載入時間 -->
              <view class='minPriceText' wx:if='{{item.minIndex==index2}}'>最低</view>
            </view>
          </block>
        </view>
      </block>
      <!-- </view> -->
    </scroll-view>
  </view>
</view>
<view style='width:100%;height:100rpx;'></view>
<view class="bottom">
  <view class='bottomLeft'></view>
  <scroll-view class='bottomBox' scroll-x scroll-with-animation scroll-left='{{left}}' bindscroll="scrolling" bindtouchstart='scrollTouchStart' data-scroll='3'>
    <block wx:for='{{groupArr}}' wx:key>
      <view class='bottomRight'>
        <text class='allCostText'>合計\n</text>
        <text class='allCost'>¥{{item.allCost}}</text>
        <image src='/img/back  
[email protected]' class='icon'></image>
      </view>
    </block>
  </scroll-view>
</view>

wxss:

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  text-align: center;
  z-index: 3;
  white-space: nowrap;
  background-color: white;
  width: 100%;
  border-bottom: 1px solid #D8D8D8;
}
page{
  overflow-x: hidden;
  width: 100%;
}
.topBox{
  width: 600rpx;
  height: 100rpx;
  float: right;
}
.topLeft{
  width: 150rpx;
  height: 100rpx;
  float: left;
}
.topRight{
  width: 200rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid #D8D8D8;
  font-size: 28rpx;
}
.type{
  position: fixed;
  top:100rpx;
  z-index: 3;
  font-size: 28rpx;
  color: #555;
  background: #F9F9F9;
  width: 100%;
  white-space: nowrap;
}
.item{
  display: inline-block;
  padding: 10rpx 20rpx;
  background: #fff;
  border: 1px solid #de5550;
  border-radius: 4px;
  margin-left: 15rpx;
}
.label{
  font-weight: bold;
  line-height: 100rpx;
  padding: 0rpx 20rpx;
  display: inline-block;
}
.marginLeft{
  margin-left: 40rpx;
}
.cur{
  padding: 10rpx 20rpx;
  background: #fff;
  border: 1px solid #de5550;
  border-radius: 4px;
  background-image: url("http://store.ddyc.com/xiaochengxu/cs/2018/0413/icon_bg_label_chosen%403x.png");
  background-position: right bottom;
  background-size: 30rpx 30rpx;
  background-repeat: no-repeat;
}
.wrapper {
  margin-top: 200rpx;
  width: 750rpx;
  overflow-x: hidden;
  position: relative;
  background-color: white;
}

.left {
  position: absolute;
  width: 150rpx;
  z-index: 2;
  background-color: white;
}

.right {
  margin-left: 150rpx;
  width: 600rpx;
}

.right-wrapper {
  overflow-x: auto;
}

.line1 {
  width: 150rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
}
.border{
  width: 148rpx;
  height: 98rpx;
  display: block;
  border-top: 1rpx solid #d8d8d8;
  border-right: 1rpx solid #d8d8d8;
}
.line2 {
  height: 100rpx;
  white-space: nowrap;
}

.price {
  width: 200rpx;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
  display: inline-block;
  border-top: 1rpx solid #d8d8d8;
  border-right: 1rpx solid #d8d8d8;
  position: relative;
}
.minPrice{
  width: 96rpx;
  height: 80rpx;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.2;
}
.minPriceText{
  width: 56rpx;
  height: 56rpx;
  font-size: 24rpx;
  color: #de5550;
  position: absolute;
  top: -15rpx;
  right: -10rpx;
  transform: rotate(43deg);
}
.bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  text-align: center;
  z-index: 3;
  white-space: nowrap;
  background-color: white;
  width: 100%;
  border-top: 1rpx solid #d8d8d8;
}
.bottomLeft{
  width: 148rpx;
  height: 100rpx;
  float: left;
  border-left: 1rpx solid #d8d8d8;
}
.bottomBox{
  width: 600rpx;
  height: 100rpx;
  float: left;
}
.bottomRight{
  width: 200rpx;
  height: 100rpx;
  text-align: left;
  display: inline-block;
  border-left: 1rpx solid #d8d8d8;
}
.bottomBorder{
  border-bottom: 1rpx solid #d8d8d8;
}
.icon{
  width: 24rpx;
  height: 24rpx;
  float: right;
  margin-right: 20rpx;
  line-height: 100rpx;
  margin-top: -5rpx;
}
.allCostText{
  font-size: 24rpx;color: #999999;margin-left:30rpx;
}
.allCost{
  font-size: 30rpx;color: #555555;margin-left:30rpx;font-weight:bold;
}

js:

// pages/classification1/classification.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    activeIndex:0,//選擇的型別下標
    typeArr: ["原廠原包", "原廠配套", "品牌","適用"],
    // 上面和下面定位的資料，結構可以根據實際介面更改
    groupArr: [
      { company: '西安恆美華城',allCost:900},
      { company: '西安恆美華城', allCost: 900 },
      { company: '西安恆美華城', allCost: 900 },
      { company: '西安恆美華城', allCost: 900 },
    ],
    // 中間內容部分的資料，資料結構以及欄位名根據實際介面更改
    lists:[
      {
        type:1,
        name:'輪胎',
        priceArr:[110,190,100,180],
      },
      {
        type: 1,
        name: '輪胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '輪胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '輪胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '輪胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '輪胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '輪胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '輪胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '輪胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '輪胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '輪胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '輪胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '輪胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '輪胎',
        priceArr: [110, 190, 100, 180],
      },
      {
        type: 1,
        name: '輪胎',
        priceArr: [110, 190, 100, 180],
      },
    ]
  },
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    this.getList();
  },
  scrollTouchStart:function(e){
    if (e.currentTarget.dataset.scroll != this.data.touchTarget){
      this.setData({
        touchTarget: e.currentTarget.dataset.scroll
      })
    }
  },
  // 
  scrolling:function(e){
    if (e.target.dataset.scroll == this.data.touchTarget){
      this.setData({
        left: e.detail.scrollLeft
      })
    }
  },
  // 點選選擇型別
  chooseType:function(e){
    this.setData({
      activeIndex: e.currentTarget.dataset.index
    });
    // this.getList();//重新請求資料
  },
  getList:function(){
    // 請求介面，接收資料並渲染
    var activeIndex = this.data.activeIndex;//當前選擇的型別下標，
    //request之後處理資料，如果後臺直接返回一行的哪個資料數值最小也就是最便宜的那個，直接渲染，如果後臺只是返回具體數字，前端處理一下,如上面的模擬的資料，前端處理
    var lists = this.data.lists;
    for(var i=0;i<lists.length;i++){
      var min = Math.min.apply(null, lists[i].priceArr);
      var index = lists[i].priceArr.indexOf(min);
      lists[i].minIndex = index;
    }
    this.setData({
      lists:lists
    })

  },
  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})

小程式資料列表上下滑的內部加左右滑

如圖，左邊是固定的，右邊內容是可以左右滑動的，上面和下面部分也是固定的，整個可以上下滑動。 wxml: <view class="top"> <view class='topLeft'></view> <scr

小程式scroll-view上下滑的內部加左右滑，scroll-x生效的情況

今天做了下滑塊裡包含左右滑的效果，由於scroll-view 左右滑說的不夠清楚，只能百度和看別人的例子了。還好scroll-view裡面可以巢狀scroll-view，不然還要處理其他的問題。不囉嗦咯，上例子，由於例子的圖片都不存在。所以就把圖片註釋掉了。複製貼上看效果的

小程式---資料列表隔行變色

<block wx:for="{{integral_sum.integral}}" wx:for-index="idx"> <view class="lis_cont {{idx%2==0?'':'lis_color'}}"> <view cla

微信小程式實現列表上拉載入,自動適應螢幕

1.檢視層wxml <view class="page__bd">  <block wx:for="{{goodsList

小程式迴圈列表計算價格資料問題

小程式計算迴圈列表的金額時：迴圈集合，數量*單價在相加，但是有時候，金額會出問題顯示一長串數字。解決方法： /** * 顯示金額嗎，迴圈集合，數量*單價在相加 */ Settlement: function() { var total = 0 if (t

小程式中圖片上傳

前端小程式：wxml  <import src="/huitianxia/view/common/foot.wxml"/> <view class='wrappe

微信小程式資料型別

資料型別 WXS 語言目前共有以下幾種資料型別： number ：數值 string ：字串 boolean：布林值 object：物件 function：函式 array : 陣列 date：日期 regexp：正則

微信小程式資料請求方法wx.request

<view wx:for='{{images}}' wx:key = 'index'> <image src='{{item.pic}}'></image> &nbs

小程式資料放入全域性變數可以使用

onLoad: function (options) { var that = this; var id = options.c_id var s_id = options.s_id that.setData({ &

微信小程式多圖上傳解決方案

為了使程式碼體積小我這裡講多圖上傳封裝到單獨的一個js 頁面的js呼叫他我們看firhealth.js檔案內容 // pages/home/home.js var upload = require('../../style/upload.js'); Pag

小程式單圖上傳到伺服器

// 上傳營業執照 fail_yingye(e) { var that = this; var uniacid = app.siteInfo.uniacid; var idx = e.currentTarget.dataset.index;

小程式資料返回時重新整理當前頁面資料

首先判斷當前頁面載入的所有頁面的陣列，陣列中最後一個就是當前頁面，然後onload當前頁面。 if (getCurrentPages().length != 0) { //重新整理當前頁面的資料 getCurrentPages()[getCurrentPages().len

微信小程式--資料儲存

對本地快取資料操作分為同步和非同步兩種。同步方法有成功回撥函式，表示數據處理成功後的操作。下面是小程式提供本地快取操作介面：以Sync結尾都是同步方法。同步方法和非同步方法的區別是：同步方法會堵塞當前任務，直到同步方法處理返回。非同步方

微信小程式-scroll-view上拉多次觸發載入事件

之前那篇部落格裡邊寫了滑塊的margin屬性影響了滑動效果。這篇文章寫一下上拉時多次觸發上拉載入事件。（改好的程式碼如下）其實也比較簡單，就是有可能沒有意識到這個小細節。在官方文件中有這麼一個屬性（如圖）。這個屬性是設定距離底部多少距離是觸發事件。我們吧這個屬性設定成0就可以了。只有上拉到最

小程式--返回重新整理上一個頁面

若從A頁面跳到B頁面（A—>B），在B頁面操作完成後需要重新整理A頁面的資料，有兩種思路：（推薦使用第2種方法） 1.在返回A頁面的時候呼叫A的頁面onShow()方法，重新查詢載入一次A頁面即可，程式碼為： onShow: function () { this.onLoad(

微信小程式中實現上傳視訊的開發程式碼

index.wxml <view class="image-plus image-plus-nb" bindtap="chooseVideo"> <view class="image-plus-horizontal"></view> &l

微信小程式，圖片上傳在java後端接收不到圖片的問題

在使用小程式的圖片上傳時，發現一直接收不到圖片，最後找到問題是Spring-mvc.xml配置檔案對圖片進行了預處理，所以導致沒有接收到。將配置檔案 <bean id="multipartResolver" class="or

微信小程式多媒體檔案上傳及下載（springboot框架中）

/** * 微信檔案上傳介面 * @param file 待上傳檔案的完整路徑 */ public FileUploadOrDownload uploadTempMedia(String file) { /

(五)微信小程式-文章列表-實現及在全域性樣式表新增頁面預設字型樣式

文章列表每篇文章包含文章標題、文章頭圖、文章概要、評論數和閱讀數，基本上使用view, image, text 這三個元件就可以完成先將準備好的圖片放在根目錄images檔案相應的路徑下，沒有建立，不過多解釋我們在前序博文微信輪播圖實現專案下繼續操作操作在post.wxm

微信小程式開發(5)——上傳多張圖片

上傳圖片的流程是：本地將圖片上傳到——》微信臨時伺服器，能夠返回臨時圖片檔案地址——》再將臨時圖片檔案地址傳輸給服務端——》服務端從微信伺服器上下載臨時圖片檔案儲存在服務端上這個流程有點繞，花了點時間，踩了幾腳坑才成功。 1.圖片選擇框 <view class=

小程式資料列表上下滑的內部加左右滑

相關推薦