微信早教小程序故事功能实现卡片列表与跳转详情页

最新推荐文章于 2025-03-13 11:40:13 发布

纸包包

最新推荐文章于 2025-03-13 11:40:13 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序前端

本文链接：https://blog.youkuaiyun.com/weixin_41341017/article/details/89483358

该博客介绍了如何实现微信早教小程序的故事功能，包括卡片列表展示和跳转到详情页。利用Mongodb+node.js搭建服务端，前端代码涉及story.wxml、story.wxss、story.js以及详情页的story_detail.wxml、story_detail.wxss和story_detail.js。

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

本功能需要先做好数据库存储数据，通过数据对应他们自带的ID，进行跳转，这里用了Mongodb+node.js结合做成服务端
小程序前端效果如下：

下面上代码：
列表代码——story.wxml

<!---故事列表---->

<view class='page'>
<block class="block" wx:for="{
  
  {new_item}}" wx:key="id">
<view class='list' bindtap='detail' data-_id='{
  
  {item._id}}'>
    <view class='title_1'>
        <text class='title'>?{
  
  {item.title}}?</text>
    </view>
    <view class='int'>
        <text>{
  
  {item.introduction}}</text>
    </view>
</view>
</block>
</view>

css样式：story.wxss，背景图需要宽高100%；本地图片需要转换base64编码，这里就不写出来了，编码太长

.list{
  text-align: center;
  background-color: rgba(140, 206, 162, 0.589);
  border-bottom: solid #f5f5f5 1px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  m