小程序轮播图（新品推荐功能）

我的小程序Git地址：https://github.com/daimananshen/muCeGoodTime

image.png

<!-- 新品推荐 -->
    <view class="recommended-index-list">
        <view class="title-header">新品推荐</view>
        <view>
            <scroll-view scroll-x="true" class="poster-mod" scroll-left="{{scrollLeft}}">
                <block wx:for="{{good}}" wx:key="key" wx:for-index="key" wx:for-item="v">
                    <view class="poster-item {{currentTab==key?'cur':''}}">
                        <image class='img' mode="widthFix" data-current="{{key}}" src='{{v.image}}' data-id="{{v.id}}" data-src="{{v.image}}" bindtap="swichNav">
                        </image>
                        <rich-text class="goodName">{{v.name}}</rich-text>
                        <rich-text class="goodName price">￥{{v.price}}</rich-text>
                    </view>
                </block>
            </scroll-view>
        </view>
    </view>

/* 新品推荐 */
.recommended-index-list {
  background-color: #fff;
  height: 100%;
  margin-top: 35rpx;
}

.title-header {
  text-align: center;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 20rpx;
}

.poster-mod {
  width: 100%;
  height: 250rpx;
  overflow: hidden;
  background: #fff;
  white-space: nowrap;
  padding: 40rpx 20rpx;
}

.poster-item {
  height: 244rpx;
  border-radius: 6rpx;
  border: 1.5px solid transparent;
  display: inline-block;
  overflow: hidden;
  margin-right: 35rpx;
}

.poster-item.cur {
  border-color: #ff614a;
}

.poster-item .img {
  width: 144rpx;
  height: 244rpx;
}

.goodName {
  width: 150rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  -webkit-box-orient: vertical;
  word-break: break-all;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  white-space: normal !important;
  text-align: center;
}

.price{color: #f2270c;}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

news() {
    // 调用默认环境数据库的引用
    const db = wx.cloud.database()
    // tables数据库创建的集合名称
    const goods = db.collection('newGoods')
    //promise
    goods.get().then(res => {
        console.log(res)
        this.setData({
          good: res.data
        })
      })
      .catch(err => {
        console.log(err)
      })
  },

数据库JOSN数据格式

{"_id":"38d78ca75edb57cb005712db480a1203","id":3.0,"index":"2","image":"https://img11.360buyimg.com/n2/s372x372_jfs/t1/59714/19/15384/96258/5dcd8916Ec8adb87c/19eb1d2ab0baf01c.jpg!q70.dpg.webp","name":"充电灯户外照明LED大功率露营帐蓬充电灯泡夜市地摊灯应急灯家用USB充电灯泡停电照明灯家用移动灯泡 58W白光（5-20小时）","price":"30.00"}
{"_id":"38d78ca75edb587a005717cf774bf64e","price":"4.90","id":4.0,"index":3.0,"image":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t22045/307/929094700/422408/3bc9906d/5b1be210Nf5b61f6c.jpg!q80.dpg.webp","name":"荧光棒 演唱会道具儿童发光心形星星公主魔法棒玩具闪光仙女棒可爱头饰成人头饰带灯新年礼物小玩具批发 新款星星棒"}
{"_id":"75777da85edb5696004c971f6948650c","id":1.0,"index":"0","image":"https://img12.360buyimg.com/mobilecms/s519x519_jfs/t1/119364/38/3338/552423/5ea7e439Ef85df0e7/3759b12c3c3d84bf.png.webp","name":"加厚摆地摊货架折叠货架2米夜市摆摊架子挂衣架摆摊桌-p 加厚1米布架+背包","price":"57.00"}
{"_id":"75777da85edb5729004c9d5a02bfe036","name":"地摊货架加厚摆摊货架夜市折叠架子摆地摊衣架挂衣架服装展示晾衣架 单买配套10个挂珠 我家货架通用","price":"50.00","id":2.0,"index":1.0,"image":"https://img10.360buyimg.com/mobilecms/s519x519_jfs/t1/108529/39/3139/75909/5e0ed815E26f9a10e/092bd6afc8bfe1da.jpg!q70.dpg.webp"}
{"_id":"8abc3c855edb590d004054a34fe9fa98","id":5.0,"index":"4","image":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/126122/23/4251/42604/5edb36ceEed479b2e/860aee7c95433770.jpg!q80.dpg.webp","name":"猿人部落录音扩音器 手持喇叭 大功率喊话器扩音喇叭大声公导游地摊宣传叫卖录音喇叭手持喊话器喇叭 36秒录音喇叭+1个5小时锂电池","price":"28.80"}