小程序商品列表加载，一次显示六条数据

最新推荐文章于 2021-05-27 11:38:34 发布

�MFL

最新推荐文章于 2021-05-27 11:38:34 发布

阅读量1.4k

点赞数

分类专栏：小程序商品列表加载文章标签： javascript css

本文链接：https://blog.youkuaiyun.com/mafeilong618/article/details/106429951

版权

本文探讨了小程序中实现商品列表加载的方法，采用一次显示六条数据的分页策略，优化用户体验，结合JavaScript和CSS技术进行实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- HTML --!>
<navigation id='Navigation' show-icon="{
   {true}}" title="分类列表" show-title="{
   {true}}" class=""></navigation>
<view class="container {
   {iphone}}">
//商品列表
  <view class="goods-container">
    <view class="goods-box" wx:for-items="{
   {firstclasslist}}" wx:key="index" bindtap="toDetailsTap" data-id="{
   {item.id}}">
      <view class="img-box">
        <image src="http://shop.linkeddream.com{
   {item.showimage}}" class="image" mode="widthFix" lazy-load="true" />
        <view class="goods-characteristic">
          <text>{
   {
   item.name}}</text>
        </view>
      </view>
      <view class="goods-title">{
   {
   item.name}}</view>
      <view style='display:flex;'>
        <view class="goods-price">Ұ{
   {
   item.newshowprice}}</view>
        <view class="goods-priceNew">Ұ{
   {
   item.showprice}}</view>
        <view class="goods-price-naver">库存{
   {
   item.showstock}}</view>